Misc

Case sensitivity

  • Assume that CSS is case sensitive
  • Style sheets are case insensitive in general, but some parts are case sensitive (element names in xml and XHTML, class and id values in CSS2, ...)

Conflicting CSS styles

Priority, from high to low
1. !important
2. Dynamically-applied styles using JavaScript
3. Inline styles
4. Specificity of the selector (higher specificity wins)
      (a)  #id                     (100 points each)
      (b)  .class, :pseudo-class   ( 10 points each)
      (c)  tag                     (  1 point each )
5. Whichever one appears last
!important
  • Can be used to override inline styles, selectors with higher specificity, and styles that appear later on
  • Cannot be used for setting styles in the DOM (using JavaScript)
  • The use of it with inline styles is not supported in all browsers (IE6, ...)

DOM

  • Setting styles in the DOM (using JavaScript) will override inline styles, as well as internal and external style sheets, but will not override !important styles
Internal vs external style sheets
  • There's no distinction for internal vs external style sheets
  • The default priority for external and internal style sheets is simply based on whichever one appears last
Author rules vs user rules
  • By default, author rules take priority over user rules
  • In CSS1, author !important rules take priority over user !important rules
  • In CSS2, user !important rules take priority over author !important rules

Tricks

Removing margins from the page
body {margin:0px; padding:0px;}
100% height layout
html, body {height:100%;}
#page {min-height:100%;}
* html #page {height:100%;}
*:first-child+html #page {height:100%;}
<html><body>
<div id="page">...</div>
</body></html>
Encompassing a floated element
  • By default an element will not automatically increase in height to encompass a floated child element
  • To prevent a floated element from extending below the bottom of the parent element, add an empty div with clear:both at the end of the parent element
<div>
    <img src="..." width="20" style="float:left;">
    <div style="margin-left:30px;"> ... </div>
    <div style="clear:both;"></div>
</div>
Creating div columns with equal height


Divs

  • CSS hacks (browser-specific)
  • JavaScript (causes the height to noticeably change initially)
  • Add a bg image to the parent div, that will serve as the bg for each column
  • If box edges are needed, Put the top and bottom bg images into separate parent divs

Table cells

  • If box edges are needed, put the box top and bottom in separate table cells; if a title bar is needed, put the title bar in a separate table cell as well
Horizontally centering a block-level element
#outer {text-align:center;}
#inner {margin:0 auto; width:800px; text-align:left;}
body {text-align:center;}
div#container {margin:0 auto; width:800px; text-align:left;}
Horizontally centering an inline element
#outer {text-align:center;}
img {display:block; margin:0 auto;}
Vertically centering a block element
  • The only way to truly vertically-center an element is to put it in a table cell
  • If the element has a fixed height, the alignment can be faked by adding a top margin or padding
Vertically centering an inline element
  • For a small inline image (<= line-height) that's included in a section of text, the most-reliable way to vertically align it is to specify vertical-align:top and add a top margin (consistent for all browsers)
  • When both small and large images will be used, vertical-align:middle is the only feasible option (used for both)
Making an element appear as if the source code for it is higher-up on the page
  • Add a placeholder to set aside room for the element
  • Use a top margin for the element in IE6 and relative position for all other browsers (FF, IE7, Safari, ...)

Negative top margin

  • Works in FF, IE6, IE7
  • Does not work in Safari

Relative position, negative top offset

  • Set the height to 0 and allow it to overflow by default
  • Works in FF, IE7, Safari
  • Does not work in IE6

Tables

Overriding default table styles using CSS
border:0;                                     /* border */

padding:0;                                    /* cellpadding */

border-spacing:0; border-collapse:collapse;   /* cellspacing */

    /* Eliminates the space between columns */
    /* IE6 doesn't support border-spacing, but it does support border-collapse */

Expanding block elements

Wrapping content

Content with natural wrapping points (whitespace in text, small inline images), with no single piece of content larger than the width of the element

No specified height:

  • The natural flow for a web page occurs -- the content wraps and the element increases in height.

Specified height:

  • FF, Safari, Chrome: The element does not change in height (the extra content overflows by default).
  • IE6, IE7: The element increases in height.
Non-wrapping content

Content without natural wrapping points, or with single pieces of content larger than the width of the element

Default width (100%) and no specified height:

  • FF, Safari, Chrome: The element expands in height but not in width (the extra content overflows by default).
  • IE6, IE7: The element increases in size.

Specified width or height:

  • FF, Safari, Chrome: The element does not change in size (the extra content overflows by default).
  • IE6, IE7: The element increases in size.

Empty div

<div></div>
  • Has a height of 0 in FF, IE6, IE7, Safari, ... (regardless of font-size, line-height)

Collapsing margins

  • Horizontal margins never collapse (same as padding)
  • Vertical margins between siblings combine, with the larger of the two being used
  • A vertical margin with no sibling (first or last child of an element) is applied up the DOM tree until a sibling is encountered; all of the margins of the elements traversed are combined with the sibling,  with the largest margin being used
  • In a physical example, it's as if each element is a three-dimensional block and each margin is a horizontal sheet  extending outwards from the block, with no two margins occupying the same height; elements move together  until one of the margins (the largest one) bumps into another element

Terms

Style

  • A formatting value
width: 10px;

Rule

selector { [declaration;]* }
  • Specifies one or more styles to apply to a set of HTML elements

Selector

  • Specifies the relevant HTML elements

Declaration

property: value
  • Specifies a style

Property

  • A formatting attribute
width

The cascade

  • The provisions for conflicting rules
  • The term is not related to inheritance

Misc

  • Client-side style sheets: The internal stylesheets with default values for a specific browser
  • Conditional comments (in IE) apply to HTML, not CSS; they're useful for including IE-specific style sheets
Resources URL: 
notes/css/resources
Sources URL: 
notes/css/sources

See Also