Basics of Cascading Style Sheets (CSS)

In these notes, CSS code is highlighted like this, and HTML code like this.

  1. A style sheet consists of rules. The format of a rule is:

    selector {
  property: value;
  property: value;
  ...
}

    Example:

    p {
  color: red;
  background-color: black;
}

    This rule says that paragraph (p) elements should have red text on a black background. The tag selector, p, applies the rule to all elements with a p tag.

  2. Selectors
    1. Any HTML tag (such as p, h1, or li) can be used as a selector.

    2. Other selectors include class and id selectors, which can be used alone or in combination with tag selectors. Any HTML element can have an id attribute (which must be unique) and/or a class attribute:

      <h2 class="paranoid">My Enemies</h2>
<p class="paranoid">They're watching me!</p>
<p id="confession">I did it!</p>

    3. Class selectors match based on the class attribute of HTML elements. For example,

      .paranoid {
  color: blue;
}

      matches elements such as <p class="paranoid"> ... </p>, <h2 class="paranoid"> ... </h2>, etc.

    4. ID selectors match based on the id attribute of HTML elements. For example,

      #confession {
  background-color: white;
}

      matches <p id="confession"> ... </p>.

    5. Selectors can combine tags with classes or ids:

      p.paranoid {
  color: blue;
}

p#confession {
  background-color: white;
}

    6. HTML provides two elements, div and span, for grouping. A div encloses other HTML elements, such as paragraphs and lists, in a box-like display. A span can be used within an HTML element, such as a paragraph or a list item.

      Using style rules matching the div or span’s class or id, one can then apply style properties to a whole collection of elements (in a div) or to a part of an element (in a span within a paragraph).

      Examples:

      <div id="main">
  <h1>My Heading</h1>
  <p>I woke up this morning ….</p>
  …
</div>

<p>I woke up <span class="time">this morning</span> ….</p>
      #main {
  …
}

.time {
  …
}

  3. Colors

    The values of color and background-color can be specified in three ways:

    1. With a limited set of named colors: silver, gray, maroon, green, navy, purple, olive, teal, white, black, red, lime, blue, magenta, yellow, cyan. (Actually, there are many more than that: see CSS3 Color Specification: Extended Color Keywords.)

      color: navy;

    2. Using the notation rgb(red, green, blue), where red, green, and blue are integers between 0 and 255.

      color: rgb(0, 127, 110);

    3. Using hexadecimal notation #rrggbb where rr, gg, and bb are two hexadecimal digits (representing values between 0 and 255 decimal) for the red, green, and blue components.

      color: #0088af;

  4. Other properties

    Besides colors, CSS can specify many other aspects of style, including fonts, text alignment, text decorations such as underlining, positioning and layout of elements, borders, and bullet and number styles for list elements.

    For more information, see my HTML 2 notes.

  5. The box model

    CSS uses a “box” model for many elements, where an element may have content, padding, a border, and a margin. The padding is space within the border; the margin is space outside the border.

  6. A longer example: