Skip to content
WANCODE
BM

Introduction to CSS

14 minBeginnerHTML · CSS · JS

In this lesson

  • Read and write a CSS rule: selector, property and value
  • Link a stylesheet with <link> and target elements by tag, class and id
  • Predict which rule wins when two rules disagree (the cascade)

The big idea

CSS is a list of rules. Each rule selects some elements and sets how they look. When rules clash, the cascade picks a winner: the more specific rule wins, and if they're equal, the later one does.

HTML says what things are. CSS (Cascading Style Sheets) says how they look: colours, fonts, spacing, layout. Same HTML plus different CSS gives a completely different-looking site.

Anatomy of a rule

style.css
h1 {
  color: darkgreen;
  font-size: 40px;
}
Selector
Which elements the rule applies to. Here: every <h1>.
Property
What you want to change, e.g. color or font-size.
Value
What to change it to, e.g. darkgreen or 40px.
Declaration
One property: value; pair. Curly braces { } hold all the declarations for that selector, and each ends with a semicolon.

Silent mistakes

CSS doesn't show errors. A missing ; or a typo like colour (British spelling!) just makes the browser ignore that declaration. If a style doesn't apply, check spelling and punctuation first. CSS always uses the American spelling color.

Linking your stylesheet

You can write CSS in a style="…" attribute or a <style> block, but the clean way is a separate file linked from the <head>. One stylesheet can then style every page on your site.

index.html
<head>
  <meta charset="utf-8">
  <title>Warung Mak Teh</title>
  <link rel="stylesheet" href="style.css">
</head>

Line 6 of this lesson's index.html already links style.css. WANCode's editor is forgiving and would load the file even without that line, but a real browser won't: if the <link> is missing or the file name is misspelt, none of your styles appear.

Three kinds of selector

CSS
p { }          /* element: every <p> */
.price { }     /* class: every element with class="price" */
#special { }   /* id: the one element with id="special" */
  • Element selectors are broad: they hit every element of that type.
  • Class selectors start with a dot. A class can be reused on many elements, and one element can have several classes (class="price promo"). This is the selector you'll use most.
  • Id selectors start with #. An id must be unique on the page, so use it for one-off things.
  • A space between selectors means "inside": .menu .price selects prices inside the menu.

The cascade: who wins?

Often two rules try to set the same property on the same element. The browser settles it with the cascade. Simplified, the rules are:

  1. More specific beats less specific. id beats class, class beats element.
  2. If they're equally specific, the later rule wins. Order in the file matters.
  3. Inherited values are the weakest. Some properties (like color and font-family) pass down from parent to child, but any rule that targets the child directly beats them.

Which colour is the price?

CSS
.sold-out { color: gray; }
.price { color: red; }

Target it directly

CSS
.sold-out { color: gray; }
.price { color: red; }
.sold-out .price { color: gray; }

Left: a price inside a sold-out item is still red. It only inherits gray, and .price targets it directly. Right: .sold-out .price uses two classes, so it's more specific and wins.

In style.css, below the comment, write two rules using element selectors:

1. Give every h1 a color of your choice (not black or grey), e.g. darkgreen.

2. Make every p a little bigger: font-size: 18px;

Checks

  • The <h1> has a colour
  • Paragraphs are at least 18px

Check understanding

Q1

In p { color: navy; }, what is color?

Q2

An element has class="note" and id="intro". The CSS has #intro { color: blue; } and then .note { color: red; }. What colour is it?

Q3

Where does <link rel="stylesheet" href="style.css"> go?

What you learned

  • A CSS rule is selector { property: value; }; the stylesheet is linked from <head> with <link rel="stylesheet">.
  • p selects by element, .price by class (reusable), #special by id (unique).
  • The cascade: more specific wins; if equal, later wins; inherited values lose to direct rules.
Preview

Console output from your code appears here.

Step 1 of 3