CS130: Spring 2022

Tools and Technologies of the World Wide Web

CS130: Spring 2022

Lessons > 4. Intro to CSS: The DOM, Selectors, & the Cascade

Exercise Files

Slides

Lecture Video(s)

Readings

  1. (2021). HTML Resources: Semantic Tags . CS 130 Course Website
  2. James Williamson Playlist 2: Structuring Page Content w/Semantic Tags .
    Please review the following sections:
    • The value of structure
    • Controlling document outlines
    • The nav element
    • The article element
    • The section element
    • The aside element
    • The div element
    • Other semantic elements
  3. CSS Rules of Thumb . CS 130 Course Website
  4. Selectors. CS 130 Course Website
  5. Color. CS 130 Course Website
  6. Text & fonts. CS 130 Course Website
  7. The Box Model. CS 130 Course Website

Today we are going to go over some of the core rules of CSS and do a practice activity (see below). I absolutely recommend that you review the LinkedIn Learning videos that are referenced in the supplemental materials. Whereas you can kind of wing it with HTML tags and look them up as needed, having a sense of how CSS works is essential to making professional-looking websites. When you have completed this lesson, you should be familiar with selectors, how to specify color values, some font properties, and the “box model.”