Cascading Style Sheets (CSS)

Lecture Notes for CS 142
Spring 2012
John Ousterhout

  • Additional reading 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 the problems with the above approaches, and provide more flexible 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:
      • Define style information once, use for many elements in a Web page, using the class attribute.
      • Share across multiple Web pages.
      • Make changes in one place, which updates everything.
      • DRY principle: Don't Repeat Yourself.
    • Inheritance:
      • Some attributes (e.g. background color) are inherited: if specified for one element, applies to nested elements.
      • Inherited value can be overridden in child.
  • 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: applies to all elements with that tag.
      HTML: 
      <h1>Today's Specials</h1>
      CSS: 
      h1 {
    color: red;
}
    • 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.
  • 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-style: 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).
  • 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>
  • 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.