Because it's a cool technology
or so I think
Because a great number of interface nowadays are in HTML
Because it's cleaner than using overcomplex HTML layout
Because it's easier
(for some value of "easier")
Cascading StyleSheet
Standard written by the W3C (World Wide Web Consrtium)
Manage the presentation and layout for DOM-based documents like HTML and XML
In the case of HTML, allows for a separation between the presentation and the strucure a page
Because <FONT> should die! die! die!
Because CSS are far more powerful than anything previously available in plain HTML
Because you will spare bandwidth, hence money
When ESPN.com switched from a classical HTML layout to a CSS-based layout, they reduced their bandwidth by 2 terabytes a day (for the main page alone!)
Basic syntax: the ruleset
selector {
property: value;
property: value;
...
}
Example
.abstract {
margin-top: 2em;
padding-left: 1em; padding-right: 1em;
border: solid 1px #369;
background-color: #f3f6f9;
font-family: "Lucida Grande", "Verdana", sans-serif;
font-weight: bold;
}
Two kinds of selectors: simple selectors and complex selectors
Simple selectors are themselve composed of differents parts
an element name: body, p, a, table, pre
or the special case * (matches any element)
an identifier (always begins with a pound "#"):
<div id="footer"> => #footer { ... }
a class name (always begins with a dot "."):
<div class="abstract"> => .abstract { ... }
a pseudo-class (begins with a colon ":"): :hover, :focus, :active,
:first-child, :lang
Simple selectors can be composed by combining any of these parts:
table.center { ... } /* tables of class "center" */
div#menu { ... } /* the div with the "menu" identifier */
a:hover { ... } /* when the cursor is over links */
a.external:hover { ... } /* when the cursor is over links of class "external" */
Simple selectors can be combined in order to create patterns, or complex selectors, borrowing some semantics from XPath:
E F => matches any F element that is a descendant of E
E > F => matches any F element that is a direct child of E
E + F => matches the F element immediatly preceded by a
sibling E element
Examples
#menu a { ... } /* link elements inside element with identifier "menu" */
.text p:first-child { ... } /* first paragraph inside element of class "text" */
#index:hover > li /* list items inside element with identifier "index", when the cursor is over it */
Selectors can be grouped in order to avoid duplicating the same rules
Typical example:
h1, h2, h3 { ... }
is the same as
h1 { ... }
h2 { ... }
h3 { ... }
Far too many properties to show you here
See the specification: http://www.w3.org/TR/CSS21
Ok, here are a few ones
Border properties
border-style: one of none, dotted, dashed, solid, double...
border-width: top-width [ right-width [ bottom-width [ left-width ]]]
border-color: one of inherit or transparent or color, where color
is either a predefined color name (black, blue, green) or a RGB color
value given in hexadecimal #RRGGBB or in decimal rgb(rr,gg,bb)
All these properties can be set using the single property border
Font properties
font-family: a font name like "Lucida Grande" or "Verdana", or a
generic font family like "serif" or "sans-serif"
font-size: a font size, absolute or relative to the one of the parent
font-weight: one of lighter, bold, bolder or a weight
font-style: one of italic or oblique
All these properties can be set using the single property font (but the
shorthand syntax can appear a little strange)
No, no font-color: use the color property
That's the "C" in CSS
Cascade over the HTML tree (the DOM)
Most properties are automatically inherited from the parent
body { font-family: "Verdana", sans-serif; }
p { /* font-family is already <"Verdana", sans-serif> */ }
But the most specific selectors have priority
p { color: black; } <p>some text here</p>
div p { color: red; } <div><p>more text there</p></div>
Unless there's !important
CSS Crash Course, http://maddingue.org/conferences/fpw-2005/csscc/
W3C CSS/2.1 Specification, http://www.w3.org/TR/CSS21