Advanced CSS

Display  Hiding an element can be done in two ways  display:none  Element is hidden and will no longer take up space on the page  Can be thought of as being removed from the DOM  visibility:hidden  Element is hidden but still takes up the same space  Other elements on the page will behave as though the hidden element is still there  It is just not visible on the page

Positioning  CSS positioning allows you to position elements on a page  Elements can be positioned using top, left, bottom and right but only if their position property is set first  Four different positioning methods  Static positioningposition: static;  Fixed positioningposition:fixed;  Relative positioningposition:relative;  Absolute positioningposition:absolute;

CSS Positioning  Static positioning  This is the default positioning  A static positioned element is always positioned according to the normal flow of the page  Top, left, right and bottom properties have no effect  Fixed positioning  Element is positioned relative to the browser window  It will not move even if the window is scrolled  Elements are removed from the normal flow of the page  All other elements behave as if the fixed element does not exist

CSS Positioning  Relative Positioning  A relative positioned element is positioned relative to its normal position  The content of the relatively positioned element can be moved and overlap other elements  The reserved space for the element is preserved in the normal flow of the document  Absolute Positioning  Absolutely positioned element are positioned relative to the first parent that has a position other than static  They are removed from the normal flow of the document

CSS Positioning  Excellent Tutorial for CSS Positioning  training/css/positioning/ training/css/positioning/

CSS Floating  Elements are floated horizontally, left or right  A floated element will move as far to the left or right as its containing element will allow  Elements after the floating element will flow around it  Elements before the floating element will not be affected  Several floating elements after each other will float next to each other

CSS Floating  clear property is used to clear floats  Syntax: #news { float: right; clear: both; } 

Pseudo class selectors  Used to add special effects to some selectors  Some pseudo selectors are newer features of CSS3  Syntax selector:pseudo-class {property:value;} Selector.class:pseudo-class {property:value;}

Anchor Selectors  a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */

:first-child selector  :first-child pseudo class matches an element that is the first child of another element e.g. #content p:first-child { font-weight: italic; } This matches the first p tag that is a child of the enclosing tag with id=content

:before and :after  Insert content before or after the specified selector  Eg p:after { content:"- Remember this"; } Inserts the content after every element p:before { content:“A wise man once said: "; } Inserts the content before every element

CSS Pseduo selectors  Extensive list of CSS Pseudo Selectors

Attribute Selectors  In addition to using class and id selectors for specifying css styles, you can use the attributes of elements  HTML  CSS [alt=Demo], img[alt=Demo] { border: 1px solid #0f0; }  This will apply a green border to any tag that has an alt value of “Demo”

Other Examples of attribute selectors  [name~=value]  ~= is used to mean if the attribute contains a specified value even if the words are separated by spaces  Expression  [title~=hello] { color: blue}  Matches   [name*=value]  *= selects elements that have attributes with a value containing the specified substring  Expression  [class*=large] { font-size: 30px;}  Match 

Other Examples of attribute selectors  [name$=value]  Selects elements that have attributes ending exactly with a given string  Expression  [class$=font] { color: red;}  Match  Warning  [name!=value]  Selects elements that do not have the specified attribute or do have the specified attribute but not with a certain value  Expression  [class!=font] { color: red;}  Match  Warning

Other Examples of attribute selectors  [name^=value]  Selects elements that have attributes beginning exactly with a given string  Expression  [class^=pretty] { border-color: blue;}  Match   [name|=value]  Selects elements that have the specified attribute with a value equal to a given string or starting with a string followed by a hypen ( -)  Expression  [class|=space] {margin: 5px;}  Match  Warning

What is CSS3?  Next evolution of CSS  Allows developers to build cleaner pages, create better visual effects and all with pages loading faster than before  Still a work in progress but the latest browsers have already implemented a large majority of the specification  Specification is broken down in to a module based approach – it is so large that breaking it up into modules makes adoption by browsers easier  Selectors module  Colors and Backgrounds  Positioning  Visual Effects etc

Examples of new features of CSS3  More powerful selectors  Text Effects and Layouts  changes to hyphenation, whitespace and justification of text in documents  Multi-Column layout  Allows designers to display content in multiple columns with definitions such as column-gap, column-count and column-width  Multiple backgrounds on a page  Shading and curved borders and much more

CSS3  CSS Roadmap  New options allow styles to be used instead of traditional graphics for professional looking websites   curved borders curved borders  box shadows box shadows  multiple backgrounds multiple backgrounds  colors and opacity colors and opacity  image opacity image opacity  text effects text effects

References  CSS Reference   CSS Selector Reference   CSS Web Safe Fonts   CSS Colors and Web Safe Colors   Color Scheme Designer 