Cascading Style Sheets (CSS)

Lecture Notes for CS 142
Fall 2010
John Ousterhout

  • Readings for this topic:
    • Pages 45-76 of http://cdn.oreilly.com/books/9780596527402/9780596527402_supp.pdf. This is an online version of the first sections of Dynamic HTML, by Danny Goodman. The book is an excellent reference, 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.
    • Some elements allow you to specify formatting using attributes: 
      <table border="2" bordercolor="black" bgcolor="red">
  • 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).
      • class attributes tie these together
    • Rich and uniform set of style attributes such as font and background color.
    • Reusability
    • Inheritance
  • Stylesheet basics:
    • A stylesheet consists of one or more rules, each with 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:
      HTML: 
      <p class="large">
      CSS: 
      .large {
    font-size: 16pt;
}
    • Tag name and class:
      CSS: 
      p.large {...}
    • The id attribute for an element:
      HTML: 
      <p id="p20">
      CSS: 
      #p20 {
    font-weight: bold;
}
    • Hierarchical combinations:
      CSS: 
      table.items tr.header {...}
    • There are several others forms besides these, such as a:hover, 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?
    • General idea: the most specific rule wins.
  • Three 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>
    • Specify styles for an individual element: 
      <div style="padding:2px;">...</div>
  • Some common style attributes:
    • 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
    • background-repeat: should background image be displayed in a repeating pattern (versus once only)
    • 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).
  • Simple example: cssExample.html.
  • 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 some browser compatibility issues.