Cascading StyleSheet Information, pg. 5

A partial list of selectors that versions of Internet Explorer before 7.0 ignore:
  • :first-child: a psuedo-class that selects the first child of the element
    • Example: p:first-child {font-weight:bold;}
  • :first-letter: a psuedo-element that allows you to select just the first letter of an element filled with text
    • Example: p:first-letter {font-size:120%; font-weight:bold;}
  • adjacent sibling selector: selects the sibling of an element that's directly to the left or to the right of it
    • Example: #content div+div {float:right;} (selects the second descendant div of #content)
  • attribute selector: selects a particular attribute of an HTML tag
    • Example: input["type='submit'"] {background-color:navy; color:white;} (selects only submit form buttons instead of every input field)
  • child selector: selects a direct descendant of an element; it's also used to hide styles from IE 6.0 or older that will be interpreted incorrectly
    • Example: html>body>#container>#footer {text-align:right;}
  • universal selector: selects every HTML element on the page
    • Example: * {font-size:12px;}

Positioning

You can position layers and elements on the page however you want. Layers are, by default, positioned so that they're "stacked" on top of each other. The HTML code should resemble how your final layout looks in the browser so that it's easy to find what you want to change. Usually positioned elements are a part of the document flow, which means that elements around it know that it's there and act accordingly. Absolutely positioned elements, on the other hand, are ignored by everything around them.

Floats

Floats are either positioned left or right and other elements flow around them. Their default behavior is to be as high and as far to one side (left or right) as possible. If two floats are positioned side-by-side and the parent layer isn't large enough to hold them, the rightmost float will drop beneath the leftmost. It can be moved outside of the parent layer (any side) by using a negative margin on the side that will overlap. You can also overlap floats.

It's not recommended to set a width on an element beside a float because Internet Explorer has a tendency to drop the non-float down below the float no matter how narrow the element is. Instead, use a margin to stop the two elements from overlapping.

#navigation {width:175px; float:left;}

 Relative Positioning

Elements set to this property can be moved wherever you want them on the webpage and overlap will not occur because other elements automatically move out of the way. The container for this element is the one it would have occupied if it hadn't been moved out of place. The properties "top," "bottom," "left," and "right" are used with relative positioning.

#content #info {width:150px; padding:3px; position:relative;
top:50px; left:50px; border:1px solid #CCC;}

Absolute Positioning

Elements set with this property can be moved wherever you want them on the webpage, but overlap may occur. The parent layer should be set to position:relative; with no offsets so that it will contain the absolute layer or else the <body> will be the container. The properties "top," "bottom," "left," and "right" are used with absolute positioning.

#container #header {position:relative;} 
#header #search {width:125px; position:absolute;
top:2px; right:3px;}

Fixed and Static Positioning

Fixed elements don't scroll with the webpage, they remain in a fixed position. They're ignored by the rest of the elements on the webpage. The properties "top," "bottom," "left," and "right" are used with fixed positioning. Static elements are positioned exactly how they are in the document, which is the default behavior of all elements.

Miscellaneous Tags:
  • clear: instructs an element (block-level or inline) not to flow around a float, but to, instead, drop down beneath it; possible values are "left," "right," "both," "none," and "inherit"
    • Example: #container #footer {clear:left} (drops down below a float on the left side of the container)
  • display: instructs an element how to display; possible values are "inline," "block," "list-item," "none," "inherit," and others
  • overflow: used to deal with content overflow when an element is too large to fit into a parent layer whose width and/or height has been set; possible values are "visible," "hidden," "auto," "scroll," and "inherit"
  • z-index: sets the stacking order of positioned elements, used with absolute and fixed elements. Descendants of an element declared later in the document will be placed in front of the descendants of an earlier element; possible values are a numeric, "auto," and "inherit