Cascading Style Sheets (CSS)

Lecture Notes for CS142
Winter Quarter 2009
John Ousterhout

Recommended reading:
- Pages 45-76 of http://oreilly.com/catalog/9780596527402/online-sections/9780596527402_supp.pdf. This is an online version of the first sections of Dynamic HTML, by Danny Goodman. This is an excellent reference book, worth owning if you are going to do serious Web development; it contains everything you could ever want to know about HTML, DOM, CSS, and events, including comprehensive information about which browsers support which features.
In the early versions of HTML, no CSS:
- Use special tags to indicate *what* is being displayed, such as <h1> or <author>, browser chooses formatting: not customizable enough.
- Some elements allow you to specify formatting using attributes:
```
<table border="2" bordercolor="black" bgcolor="red">
```
  Hard to manage: too much repetition.
CSS was introduced to solve these problems and provide a more flexible approach to formatting:
- Formatting information is separated from document content:
  - Content (what to display) is in HTML files.
  - Formatting information (how to display it) is in separate style sheets (.css files).
  - Tags (e.g., class attributes) tie these together
- Rich and uniform set of style attributes such as font and background color.
- Reusability: style information can be defined once and then used for a variety of elements in a Web page, using the class attribute for HTML elements. It can also be shared across multiple Web pages. You only have to make changes in one place.
- Inheritance: some style attributes (e.g. background color) are inherited: if it is specified for a parent element, it also applies to children of that element and their children, etc., unless overridden in the child.
Stylesheet basics:
- A stylesheet consists of one or more rules.
- A rule consists of a selector and a declaration block:
```
body {
    font-family: Tahoma, Arial, sans-serif;
    color: black;
    background: white;
    margin: 8px;
}
```
- Each declaration in the declaration block contains an attribute name and value.
Possible forms for selectors:
- Tag name: h1 means the rule will apply to all <h1> elements.
- Class attribute:
```
<p class="large">

.large {
    font-size: 16pt;
}
```
- Tag name and class:
```
p.large {...}
```
- The id attribute for an element:
```
<p id="p20">

#p20 {
    font-weight: bold;
}
```
- Hierarchical combinations:
```
table.items tr.header {...}
```
- There are several others forms besides these, such as a:active, which applies to <a> elements when the mouse is over them and a:visited, which applies to <a> elements that have previously been visited). See the recommended reading for details.
What if several rules apply to a particular element and they specify conflicting values for an attribute?
- Complex set of policies determines which rule wins.
- General idea: the most specific rule wins.
- A value specified for the element itself overrides an inherited value.
- An inherited value from a nearer ancestor overrides an inherited value from a more distant ancestor.
- table td selector overrides td.
- td.header selector overrides td.
- (@code #id14} overrides td.
Two ways to specify CSS for a Web page:
- Most common approach: put the CSS in a separate file and reference that file in the <head> for the page:
```
<link rel="stylesheet" type="text/css" href="myStyles.css">
```
- Include the style information directly into the page's <head> (use only for page-specific styles):
```
<style type="text/css">
    body {
        font-family: Tahoma, Arial, sans-serif;
        ...
    }
</style>
```
Simple example: cssExample.html.
Style attributes: here are a few of the most important ones:
- background, color: background and foreground colors
  - Color specs: must ultimately turn into red, green, and blue intensities between 0 and 255:
    - Predefined values such as red and blue.
    - #rrggbb: rr, gg, and bb are 2-digit hexadecimal numbers.
    - rgb(0, 255, 0): red green and blue intensities as decimal numbers.
    - rgb(0%, 100%, 0%): red green and blue intensities as percentages.
- background-image: image for element's background
- font, font-family, font-size, font-weight: font information for text
- text-align, vertical-align: horizontal and vertical alignment
- Box layers for block-level elements (from out to in):
  - margin (transparent: no background): used for separating this element from its neighbors.
  - border, border-bottom, etc.
  - padding (unoccupied space, but with the element's background): used for creating space between the edge of text and the edge of the background or the border.
  - The element's contents.
  - Can combine these attributes to achieve effects such as underline.
  - Distances can be specified in a variety of units:
    - px: pixels
    - mm, cm, in: display-resolution-independent distances
    - pt: printers' points
    - em, ex: other printers' units
- position (relative vs. absolute), top, bottom, left, right, width, height: override default geometry
- cursor
- display, visibility: determine whether or not element is displayed
- opacity: for transparent elements
Inheritance: some attributes (e.g. background, font-size) are inherited, others are not (border).
You should use CSS in this class and in all Web design. For example, don't specify colors, fonts, alignments, or pixel distances in HTML elements.
Beware: CSS is an area where there are still significant browser compatibility issues.