CSS Crash Course

Sébastien Aperghis-Tramoni

Why talking about CSS?

  • 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")

What's CSS anyway?

  • 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

Why using CSS?

  • 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!)

What does CSS look like?

  • 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;

Uhh.. Selectors?

  • 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

Selectors (2)

  • 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" */

Selectors (3)

  • 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 { ... }


Common properties

  • 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

Common properties

  • 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

The cascading part

  • 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

Live demo!


Thank you