WDD6 - CSS: getting started
- I can describe inline, internal and external CSS.
- I can explain the cascade when more than one rule targets the same element.
- I can use grouping selectors and descendant selectors correctly.
- I can choose the most appropriate CSS placement for a given situation.
- I can predict which rule will win when inline, internal and external CSS conflict.
- I can write a grouping selector such as
h1, h2and a descendant selector such asnav a.
CSS styles the semantic structure you built in WDD4.
Key vocabulary
Where CSS can be placed
Inline, internal and external CSS
CSS can be written in three places. Inline CSS is written directly on one HTML element using the style attribute. Internal CSS is written inside a <style> block in the page's head. External CSS is stored in a separate .css file and linked from the HTML page.
Fast for one-off testing, but hard to maintain. Example: style="color: blue".
Useful for one page. Rules sit in <style> in the head.
Best for a multi-page site, because many pages can share one stylesheet.
The cascade
"Cascading" means several CSS rules can apply to the same element. When rules conflict, the browser decides which one wins. At this stage, use this simple Higher-friendly rule: inline CSS beats internal CSS, and internal CSS beats external CSS when the selectors are otherwise equally specific.
Two more cascade situations come up in real pages. If two rules have exactly the same specificity and come from the same place - for example two rules in the same external stylesheet, two internal rules in the same page, or two separate linked stylesheets - the rule written or linked later wins, because the browser reads rules in order and applies each one as it reaches it. A declaration can also be marked !important to force it to override the normal cascade, but this should be used rarely: it makes a stylesheet much harder to override or maintain later, so conflicts should normally be solved through selector choice and rule order first, not by reaching for !important.
p { color: green; }
<p style="color: blue">
The paragraph will be blue.
Selectors
h1 {
color: #185FA5;
font-size: 32px;
}h1 is the selector: it chooses all h1 elements.color and font-size are properties.#185FA5 and 32px are values.h1, h2, h3 {
font-family: Arial, sans-serif;
color: #042C53;
}nav a {
color: white;
text-decoration: none;
}<a> elements inside <nav>. WDD10 will use this pattern for navigation bars.Practical: live CSS editor
Edit the CSS on the left and watch the preview on the right update instantly. Use it to test grouping and descendant selectors on real markup before you write them from memory below.
nav a to nav p — the links stop being styled, because there is no p inside nav.Write the selector only:
- Style all
h1andh2headings with the same rule. - Style only links inside
nav.
h1, h2- grouping selectornav a- descendant selector
- Calling
nav aa child selector. It is a descendant selector: it targets links inside nav at any depth. - Forgetting commas in grouping selectors.
h1, h2groups selectors;h1 h2means h2 elements inside h1 elements. - Using inline CSS everywhere. Inline CSS is hard to maintain across a multi-page site.
- Confusing HTML and CSS. HTML gives meaning and structure; CSS controls appearance and layout.
The SQA wording names both grouping selectors and descendant selectors. Use those exact terms. A comma means grouping; a space between selectors means descendant.
Task Set A - Core questions
h1, h2 and h3.nav.h1 and h2 red, but nothing changes colour when it runs. Find the bug and write the corrected CSS.h1 h2 {
color: red;
}h1, h2 {
color: red;
}The original used a space, which makes it a descendant selector — it looks for an h2 nested inside an h1, which never happens on this page, so it matches nothing. A comma turns it into a grouping selector that applies to both.
Task Set B - Extension
p { color: green; }. An internal style block says p { color: purple; }. The selectors are equally specific. Which colour is used, and what would happen if an inline style also set the paragraph to red?!important to every CSS declaration because a stubborn style will not apply. Explain why this is a poor long-term habit, and suggest a better first step to try instead.reset.css first, then theme.css second. reset.css has p { color: black; } and theme.css has p { color: navy; }, both equally specific. Which colour applies, and why?- Download
WDD6_starter.htmlbelow. - Open WebStorm and open the downloaded file (File > Open).
- Add a
<style>block in<head>and follow the six TODO steps written as an HTML comment near the top of the file. - Save the file, then open it in a browser to check the page still looks the same as it did with inline CSS - a correct refactor changes nothing visually.
<style>
nav {
background-color: #042C53;
padding: 10px;
}
nav a {
color: white;
text-decoration: none;
margin-right: 12px;
}
h1, h2 {
font-family: Arial, sans-serif;
color: navy;
}
</style>All three nav a links share one descendant selector; h1, h2 share one grouping selector. Every style="..." attribute in the body can now be deleted, since the same rules live in the stylesheet instead.
File this in OneNote under:
Higher Computing Science > Web Design & Development > WDD6
Suggested timing: 8 min warm up, 15 min CSS placement/cascade, 15 min selectors, 15 min worked examples, 20 min Task Set A, remaining time Task Set B including B4.
Terminology watch: call nav a a descendant selector, not a child selector. WDD10 depends on this term being right.
Scope control: this lesson introduces CSS rule shape and selector types. Box model, float, margin, padding, height and width are WDD7-WDD9.
B4 is the first WebStorm task on this site. This lesson lands as an actual double period (see calendar.md/WDD.md §2a - planned as a single, but scheduled on a double), which is exactly why B4 exists: use the spare time to walk the class through downloading the starter file, opening it in WebStorm, and saving/checking it in a browser, before WDD7 expects them to do this independently under tighter time. Worth doing as a live demo on the board first if this is genuinely the pupils' first time in WebStorm.