STEP 4 — CSS BASICS

CSS is a different language from HTML. HTML builds the structure of the page; CSS styles it. This week you set up your stylesheet and learn to read and write a rule.

How to read this page: first come the instructions — what to do this week, with the videos. After the instructions, one gray-blue box gathers all the material for your Step 4 page — rewrite it in your own words. Text shown as code is the kind of thing you type onto your page.

 

INSTRUCTIONS

1 · Set up your stylesheet

Watch the intro, then create your style.css file, save it in your css folder, and link it from the head of your HTML page. Write the standard rules listed in the gray-blue box below.



2 · Add a Google Font

Now do something satisfying with your stylesheet: swap in a real typeface. The video shows how to link a Google Font in the head and call it from a CSS rule. Apply it to your headings or body text.



 

MATERIAL FOR YOUR STEP 4 PAGE

Everything inside the gray-blue box below is what you rewrite, in your own words, onto your step4.html page.

Rule and selector

The whole block is a rule. Every rule starts with a selector — the part before the curly braces that chooses what gets styled. Inside the braces come the declarations: a property, a colon, a value, and a semicolon. The colon connects the property to its value; the semicolon ends the line. An equals sign is never used in CSS.

selector {
  property: value;
}

The standard rules

Write rules for the elements you use most: header, footer, main, h1 through h6, and p. One rule styles every matching element on the page at once. And remember where the file lives: your style.css goes in the css folder.

The last guy wins

HTML is linear, but CSS is not quite. If two equal rules target the same thing — say an h1 rule near the top of the file sets red, and another h1 rule near the bottom sets blue — the one lower in the file wins. The last guy wins.

 
 

Work Due — Friday, October 2

Set up your style.css in the css folder, link it, and write the standard rules. Link a Google Font and apply it.

Then build your step4.html page — your own notes on CSS rules, selectors, the standard rules, and last-guy-wins — and upload it to your site.