Photograph of the Milky Way seen through a rock arch

Cascading Style Sheets are to web development as interior design is to a home: they determine the layout and presentation of your pages. Just like a house, a web page needs a solid, stable foundation, walls, and the ability to meet building codes before design choices should be considered. In HTML, that’s content, structure and validation. For basic web pages, everything else is CSS.

Goals: Understand the purpose of CSS; create simple inline, embedded, and linked styles for a web page and see how style conflicts among them are resolved; include comments and vendor-prefixed properties in a stylesheet.

Prerequisites: The

Total Time: 90 minutes

Core Material

  1. Introduction
  2. History & Support
  3. Applying CSS
  4. Syntax
  5. Style Rule Prioritization
  6. !important
  7. Understanding The Cascade
  8. General Rules
  9. Comments
  10. Vendor Prefixes & Flags

Optional: if you’ve been using CSS for some time, read up on CSS Shortcuts

Recommended Reading

Read Chapter 11, Cascading Style Sheets Orientation in Learning Web Design by Jennifer Niederst Robbins. Read Chapter 10, Introducing CSS in HTML and CSS by Jon Duckett.

Supplementary Material

Watch the Getting Started With CSS video series at Treehouse; complete the three quizzes.  (Note that you’ll need a paid Treehouse membership to see the full-length videos, although a 14-day free trial is available).

Read the “Beginning With CSS” material from the Web Platform Docs: What Is CSS?; Why Use CSS? and Getting Started With CSS 

When You’re Done

When you understand the fundamentals of CSS, you’ll be ready to start selecting web page elements in order to alter their appearence.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.