CS130: Spring 2020

Intro to the Web

CS130: Spring 2020

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

Week 3: Wed, Apr 15

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.”

Review the Slides

  1. Intro to CSS & the DOM

Watch the Lecture Video(s)

  1. Intro to CSS & the DOM (lecture recording)

Review / Study the Supplemental Materials

  1. CSS Rules of Thumb . CS 130 Course Website
  2. Selectors. CS 130 Course Website
  3. Color. CS 130 Course Website
  4. Text & fonts. CS 130 Course Website
  5. The Box Model. CS 130 Course Website
In order to access the LinkedIn content, please sign in with your NU account. Sign into LinkedIn Learning

Do the Activity

A. Get your files set up

Open this the CodePen: https://codepen.io/vanwars/pen/WWRqRY and either fork it (and edit it directly on CodePen), or download it to your computer and edit it via Atom.

B. Experiment with the following CSS techniques

  1. Body copy: apply some styling to the body text of your HTML page. Experiment with some following text properties: font-family, font-size, line-height, color, font-size, text-transform, letter-spacing
  2. Header font: apply some styling to the h1 tag by selecting, importing and applying a Google Font.
  3. Style the img tag and see if you can make it look like it’s sitting in a picture frame, using the following box-model properties:
    padding, border, border-radius, box-shadow, width
  4. Figure out a way to apply a slightly different heading style to only headers that are inside of sections (which correspond to blog post titles).
  5. Create a class that, when applied, turns the text to hot pink.
  6. Experiment with the :hover keyword/pseudo-class. Add some hover effects to headings, paragraphs, maybe a row in a table.

CHALLENGE: Create a way that shows a paragraph number next to each paragraph, telling you which number paragraph it is on the page. Also, hide some codewords in one of the paragraphs which only stand out when you hover on the paragraph. Inspiration: https://ryanstutorials.net/css-tutorial/css-selectors.php#activities

One Possible Solution


Code