CSS: Getting your Style

R. Alexander Miłowski

milowski@ischool.berkeley.edu

School of Information, UC Berkeley

CSS in a Nutshell

CSS works by:

The result is a render tree that is presented for display or committed to various page-based formats.

Cascading Style Sheets (CSS)

Styles cascade:

For example, if you set the font family to Arial on the body element, all its children will inherit that font family.

That is, unless another rule changes the property.

The properties cascade through the document structure.

An Example

⇓ a selector
body {
   font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
   line-height: 1.25em;
   color: #252c58
}
⇑ a block (curly bracketed content)
⇓ selectors can be separated by commas for grouping
h1, h2, h3, h4, h5, figcaption, caption {
   font-family: Helvetica, Arial, sans-serif;
}

h2 {
   font-size: 1.25em;
   ⇑ a property and value; ends with a semicolon
}            
div.slide h1 + * {
   margin-top: 2em;
}

div.slide h1 + img { ⇐ there are rules for which selector is more specific
   margin-top: 1em;
}

Syntax

selector {
    property-1 : value ;
    property-2 : value ;
    ...
}
...            
selector-1, selector-2, ... {
    property-1 : value ;
    property-2 : value ;
    ...
}

Values

Values can be:

CSS3 Selectors — 1

Pattern Meaning Described in section First defined in CSS level
* any element Universal selector 2
E an element of type E Type selector 1
E[foo] an E element with a "foo" attribute Attribute selectors 2
E[foo="bar"] an E element whose "foo" attribute value is exactly equal to "bar" Attribute selectors 2
E[foo~="bar"] an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar" Attribute selectors 2
E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar" Attribute selectors 3
E[foo$="bar"] an E element whose "foo" attribute value ends exactly with the string "bar" Attribute selectors 3
E[foo*="bar"] an E element whose "foo" attribute value contains the substring "bar" Attribute selectors 3

CSS3 Selectors — 2

Pattern Meaning Described in section First defined in CSS level
E[foo|="en"] an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en" Attribute selectors 2
E:root an E element, root of the document Structural pseudo-classes 3
E:nth-child(n) an E element, the n-th child of its parent Structural pseudo-classes 3
E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one Structural pseudo-classes 3
E:nth-of-type(n) an E element, the n-th sibling of its type Structural pseudo-classes 3
E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one Structural pseudo-classes 3
E:first-child an E element, first child of its parent Structural pseudo-classes 2
E:last-child an E element, last child of its parent Structural pseudo-classes 3

CSS3 Selectors — 3

Pattern Meaning Described in section First defined in CSS level
E:first-of-type an E element, first sibling of its type Structural pseudo-classes 3
E:last-of-type an E element, last sibling of its type Structural pseudo-classes 3
E:only-child an E element, only child of its parent Structural pseudo-classes 3
E:only-of-type an E element, only sibling of its type Structural pseudo-classes 3
E:empty an E element that has no children (including text nodes) Structural pseudo-classes 3
E:link
E:visited
an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited) The link pseudo-classes 1
E:active
E:hover
E:focus
an E element during certain user actions The user action pseudo-classes 1 and 2

CSS3 Selectors — 4

Pattern Meaning Described in section First defined in CSS level
E:target an E element being the target of the referring URI The target pseudo-class 3
E:lang(fr) an element of type E in language "fr" (the document language specifies how language is determined) The :lang() pseudo-class 2
E:enabled
E:disabled
a user interface element E which is enabled or disabled The UI element states pseudo-classes 3
E:checked a user interface element E which is checked (for instance a radio-button or checkbox) The UI element states pseudo-classes 3
E::first-line the first formatted line of an E element The ::first-line pseudo-element 1
E::first-letter the first formatted letter of an E element The ::first-letter pseudo-element 1
E::before generated content before an E element The ::before pseudo-element 2
E::after generated content after an E element The ::after pseudo-element 2

CSS3 Selectors — 5

Pattern Meaning Described in section First defined in CSS level
E.warning an E element whose class is "warning" (the document language specifies how class is determined). Class selectors 1
E#myid an E element with ID equal to "myid". ID selectors 1
E:not(s) an E element that does not match simple selector s Negation pseudo-class 3
E F an F element descendant of an E element Descendant combinator 1
E > F an F element child of an E element Child combinator 2
E + F an F element immediately preceded by an E element Adjacent sibling combinator 2
E ~ F an F element preceded by an E element General sibling combinator 3

Specificity

A selector's specificity is calculated as follows:

*               /* a=0 b=0 c=0 -> specificity =   0 */
LI              /* a=0 b=0 c=1 -> specificity =   1 */
UL LI           /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI        /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13 */
LI.red.level    /* a=0 b=2 c=1 -> specificity =  21 */
#x34y           /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */

CSS Properties

Too many to enumerate, but here are some resources:

There is also the old school method of a book on CSS.