Introduction to Styles

HTML is about content and structure. It was not intended to define style. Instead, we use CSS (Cascading Style Sheets) to make our web page look nice.

Styles can be specified at four levels:

  1. tag selector - applies to elements matching the given tag and it's children
  2. class selector - applies to elements with a matching class attribute
  3. id selector - applies to the single element with the matching id attribute
  4. an individual element's style attribute
Styles lower on the list override styles at the top of the list. For example, if you specify a color with a tag selector, it will be overridden by the color within a class selector.

Here are some good resources for learning CSS properties:

This is a paragraph of plain text. It renders with whatever default color, font and size that the browser chooses.

This is a paragraph with a specific style. The text is displayed in a red, 16pt, Courier font.

This paragraph does not have a style attribute. Instead, it has a class attribute. That class links to the matching selector above.

This is an example of how you can center a block but not center the text within that block.
  1. First things first
  2. Then do the second thing
  3. And finally, the last thing