Cascading Style Sheets (CSS)

Lecture Notes for CS 142
Winter 2015
John Ousterhout

  • 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">
  • 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
      • Result: define style information once, use in many places
      • DRY principle: Don't Repeat Yourself.
  • 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). For details, check out Web sites such as w3schools or Mozilla Developer Network, or the book Dynamic HTML: The Definitive Reference, Third Edition, by Danny Goodman.
  • 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
    • cursor
    • display: determine whether or not element is displayed; none means not visible (shrink to zero size), blank means visible
    • width, height: override default geometry
    • position (relative vs. absolute), top, bottom, left, right
  • Inheritance: some attributes (e.g. font-size) are inherited, others are not (border, background).
  • 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.