Notes on CSS

This outlines some essentials of using CSS. A large number of references go into the details of CSS including our online text, Beginning HTML, XHTML, CSS and JS by Jon Duckett. Essential read is chapter 7 of this text. However, it is packed with endless details on the CSS rules. This makes it an essential reference for the user of CSS, but not easily digestable as a tutorial. This page highlights the key facts and concepts you need to learn from chapter 7.

The fundamental idea is to separate:

Document structure - the html tags
Content - the text and images contained within the tags
Appearance - how does the page look when displayed by the browser

Just as in the principles of object-oriented programming, separation of concerns is essentail.

CSS specifies rules for the appearance of elements that appear in a web page. By having all (or many) of the pages at a web site link to common CSS files, we get the advantages of

Sitewide consistency
Much easier to maintain
Reduced bandwidth for delivering web pages. Only a single copy of the site wide style sheet need be transmitted to a browser rather than repeating the style information in each web page.

Each CSS rule has the form

    selector {
       property: value(s);
       property: value(s);
    }

An essential feature of CSS is inheritance; when a property has been applied to one element, it will be applied to all child elements. For example, once the font-family property has been specified for the body element, it applies to all html contained within the body.

Working hand in hand with inheritance is the concept of rule specificity. If another rule is more specific about the elements it applies to, it takes precedence. For example

   <body style="font-family: Georgia, serif">
      <h1>Code example</h1>
      <p style="font-family: Courier, monospace">
      public static void main(String[] args ) </p>

"Code example" will be in Georgia font but the Java code in Courier font.

Page 254-255 contains a list of CSS properties and much of the chapter elaborates on the values these properties may be assigned. You can learn these as needed. However, the heart of CSS is the selectors. If you can't precisely specify which page elements the rule applies to, it does not do you much good. Careful, reading of p. 276-282 is essential.

First, gain experience with type, class and id selectors. These are the workhorses. As your expertiese increases, add child and descandant selectors to your repertoire. Beginners tend to rely heavily on id selectors making their CSS code lengthy an repetitive. More experienced users employ the hierarchical child and descendant selectors to greatly simplify their code. Lastly, adjacent sibling, general sibling, and attribute selectors are occaisionally used.

Order of specificity of rules, if more than one applies

First by where specified

Inline = style attribute of element
CSS style sheet (usually in an external .css file
Browser defauls

Then by weight
- Number of elements in rule +
- 10 * number of classes specified +
- 100 * number of IDs specified

Basically, the weight implements the rule: ID trumps class trumps element. This is application of the the principle that "the most specific rule applies."