Cascading Style Sheets
Senior 4 · ICT
Cascading Style Sheets
Lesson 1 of 3
25 min
The pages you built in Unit 5 all look alike: black text, blue links, the browser's default fonts. That is deliberate. HTML says what each part of a page is; a second language, CSS, says how it should look: colours, fonts, spacing and layout. Because the two are kept apart, the same HTML can be given a completely new appearance by changing only the CSS, and one style sheet can style hundreds of pages at once.
Definition
CSS (Cascading Style Sheets): the language that describes how HTML elements are presented on screen, on paper or by other media.
Rule (rule set): a selector followed by a declaration block in braces { }.
Selector: the part of a rule that chooses which elements it styles.
Declaration: one property: value; pair inside the braces, such as color: navy;. A property is the feature being set (colour, size); the value is the setting.
Style sheet: a collection of CSS rules.
Early web pages mixed content and appearance, with tags such as <font color="red"> repeated on every page. Håkon Wium Lie, who was working with Tim Berners-Lee at CERN, proposed Cascading Style Sheets on 10 October 1994. With Bert Bos as co-author, the first version, CSS level 1, became a W3C Recommendation on 17 December 1996. The word cascading refers to the fixed order of priority that decides which rule wins when several rules style the same element (Lesson 3).
font-size, background-color, text-align.32px, not 32 or 32 px./* like this */.<style> element in the head. Lesson 3 compares this with the other two ways of adding CSS.Run it. The heading turns navy and 32 pixels tall, and both paragraphs change, because the selector p matches every paragraph. Delete the whole <style> element and run again to see the browser's defaults.
| Selector | Example | Matches |
|---|---|---|
| Type (element) | p | every <p> |
| Class | .note | every element with class="note"; a class may be used on many elements, and one element may have several classes: class="note urgent" |
| ID | #motto | the one element with id="motto"; an id must be unique in the page |
| Group | h1, h2 | every <h1> and every <h2> |
| Descendant | footer strong | every <strong> anywhere inside a <footer> |
| Universal | * | every element |
| Pseudo-class | a:hover | a link while the mouse is over it |
The descendant selector uses the DOM tree from Unit 5: footer strong means "a strong element whose ancestor is a footer".
Run it and match each rule to what it changes. Only the yellow paragraph has the class; only the motto has the id; the word "before" stays dark but "club leader" turns crimson, because only the second <strong> is inside the footer.
CSS accepts colours in several forms. All four of these describe colours a browser can show:
| Form | Example | Notes |
|---|---|---|
| Keyword | navy, crimson, white | About 140 named colours |
| Hexadecimal | #1E88E5 | Two hex digits each for red, green and blue |
| Short hex | #FC0 | Each digit doubled: the same as #FFCC00 |
| RGB function | rgb(30, 136, 229) | Red, green, blue from 0 to 255 |
Screens make every colour by mixing red, green and blue light. A hex code is just the three amounts written in base 16, the number system you used in Unit 2:
Worked example 1: hex to RGB and back
(a) Convert #FF8000 to rgb(). Split into pairs: FF, 80, 00.
So #FF8000 = rgb(255, 128, 0): full red, half green, no blue, which is orange.
(b) Convert rgb(0, 160, 75) to hex. Divide each number by 16: gives 00; gives A0; gives 4B. So the colour is #00A04B, a green.
Check: ✓. Equal amounts of red, green and blue always give a grey: #808080 is mid grey, #000000 black, #FFFFFF white.
| Property | Example values | Effect |
|---|---|---|
font-family | Arial, Helvetica, sans-serif | The typeface. List several, separated by commas: the browser uses the first one installed. End with a generic family (serif, sans-serif, monospace) as a last resort. Names with spaces go in quotes. |
font-size | 16px, 1.5em, 1.2rem, 120% | The size of the letters |
font-weight | normal, bold, 700 | Thickness |
font-style | normal, italic | Slanted text |
color | #222222 | The text colour (spelled the American way) |
text-align | left, center, right, justify | Alignment of the lines in a block |
text-decoration | none, underline, line-through | Lines on the text |
text-transform | uppercase, lowercase, capitalize | Changes the case of the letters as displayed |
line-height | 1.5 | Space between lines, here 1.5 times the font size |
letter-spacing | 2px | Extra space between letters |
Units. px (pixel) is a fixed size. em is relative to the font size of the parent element, and rem to the font size of the root <html> element, which is 16px by default. Relative units respect a reader who has set a larger default text size, so they are preferred for text. With the default size, .
Run it and hover over the link. The heading is written in lower case in the HTML but displayed in capitals by text-transform, and its size, 2em, is twice the body's 16px. Change line-height to 1 and then to 2 to see how much spacing affects readability.
Worked example 2: which elements does each selector match?
<h2 class="title">Debate Club</h2> <p class="title">Meets on Thursdays</p> <p id="room">Room 4</p> <section><p>Topic: <em>Should homework be optional?</em></p></section>
| Selector | Matches |
|---|---|
.title | the h2 and the first p: both have the class |
p.title | only the first p: a p element that has the class |
#room | only the second p |
section p | only the last p: the only one inside a section |
p em | the em, because it is inside a p |
h2, #room | the h2 and the second p |
Worked example 3: why is nothing styled?
p {
color = blue;
font-size: 18;
font-family: Times New Roman, serif
text-align: centre;
color = blue; uses =. CSS uses a colon: color: blue;.font-size: 18; has no unit, so the browser ignores it: font-size: 18px;.font-family line has no semicolon, so the browser reads it and the next line as one broken declaration and drops both. Add the semicolon, and put the name in quotes: "Times New Roman".centre is British spelling; CSS uses center.} is missing.A browser never shows an error for CSS: it silently skips any declaration it cannot understand. That is why a mistake shows up only as "nothing happened".
Dave Gray: CSS Introduction and Tutorial for Beginners. Watch where CSS can be written, how a rule is built from a selector and declarations, and how class and id selectors are used.
Warning
color, center, gray (grey also works as a colour keyword, but colour and centre do not).Tip
Dot for class, hash for id. .note matches class="note" (many elements); #motto matches id="motto" (one element). To remember: an id is like a national ID number, unique to one person.
Practice
.warning { color: red; font-weight: bold; }.h1 and h2 dark green (#0b6e4f) and centred.id="banner" that sets its text to capitals with 2px between letters.#C0392B to rgb() and rgb(255, 255, 0) to hex. What colour is the second?font-family declaration that uses Verdana if available, then Tahoma, and otherwise any sans-serif font.#BBBBBB on a white background "to look modern". Evaluate this choice..warning (a class selector). Properties: color, font-weight. Values: red, bold.h1, h2 { color: #0b6e4f; text-align: center; }#banner { text-transform: uppercase; letter-spacing: 2px; }rgb(192, 57, 43). rgb(255, 255, 0) = #FFFF00: full red and green with no blue, which is yellow.font-family: Verdana, Tahoma, sans-serif;#333333.Key points
selector { property: value; }.p), class (.note), id (#motto), group (h1, h2), descendant (footer strong).#RRGGBB, base 16) or rgb(r, g, b) with 0–255 per channel.font-family (with a generic fallback), font-size (px, em, rem), font-weight, color, text-align, line-height. Browsers skip invalid declarations without an error.Sources and credits
This lesson adapts CC BY-SA material and is shared under CC BY-SA 4.0.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>S4 ICT Club</title>
<style>
h1 {
color: navy;
font-size: 32px;
}
p {
color: #444444;
font-family: Georgia, "Times New Roman", serif;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>S4 ICT Club</h1>
<p>We meet every Wednesday after classes to build web pages.</p>
<p>This term every member is building a page about their home district.</p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Selectors</title>
<style>
/* type selector: every p */
p { color: #333333; }
/* class selector: any element with class="note" */
.note { background-color: #fff3cd; }
/* id selector: the ONE element with id="motto" */
#motto { font-style: italic; color: #0b6e4f; }
/* grouping: h1 and h2 together */
h1, h2 { font-family: Arial, Helvetica, sans-serif; }
/* descendant: strong only when inside a footer */
footer strong { color: crimson; }
</style>
</head>
<body>
<h1>S4 ICT Club</h1>
<p id="motto">Learning to build the web, one tag at a time.</p>
<h2>Rules</h2>
<p>Save your work in your own folder.</p>
<p class="note">Note: the lab closes at 5 p.m. on Fridays.</p>
<p>Log off <strong>before</strong> you leave.</p>
<footer><p>Questions? Ask the <strong>club leader</strong>.</p></footer>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text styling</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #222222;
}
h1 {
font-size: 2em; /* 2 × 16px = 32px */
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
color: rgb(30, 136, 229);
}
.lead { font-size: 1.25em; font-weight: bold; }
.small { font-size: 0.8em; color: gray; }
.quote { font-style: italic; text-align: right; }
a { color: #0b6e4f; text-decoration: none; }
a:hover { text-decoration: underline; }
</style>
</head>
<body>
<h1>Club news</h1>
<p class="lead">Our pages passed the W3C validator.</p>
<p>All twelve members checked their pages with the
<a href="https://validator.w3.org/">W3C Markup Validation Service</a>
and fixed every error before the deadline.</p>
<p class="quote">"Check the code, then check it again."</p>
<p class="small">Posted by the club secretary.</p>
</body>
</html>Quick check
Which selector styles every element that has class="note"?