CSS Lesson plan

Intro

• What is CSS? Cascading Style Sheets. They allow us to add presentation to our HTML.

• Key about CSS is the rule. This comes in the form of a property/value pair e.g:

  // Set a color of red
  color: red;
  

• Try this inline

Inspecting

Now let's inspect this rule with our inspector tool and change the colour.

FYI to find out rules and properties visit MDN it is a great resource, or (as I learnt) inspect your fave websites!

Relating the rule to the selector

Creating inline rules works, but it isn't sustainable. We need to relate the rule to the HTML tag. This is done with selectors. We will learn about class and tag selectors.

First, create a css file and reference it:

<link rel="stylesheet" href="styles.css" />

Then, create a selector. Tag selectors are the simplest:

<p>Paragraph tag</p>

// To attach a rule to this tag, use the "p" without any brackets.
// Then, add that same colour rule between the curly braces. Anything 
// Between the curly braces gets applied to that "p" tag

p {
  color: red;
}

Now for a class rule, if a HTML tag has a "class" attribute, write this using a dot:

.paragraph {
  color: red;
}

More rules

Let's try making some more rules

Other things to cover

• The box model
• The cascade
• Sibling selectors