Module 14: Introduction to CSS
What CSS is
🏠The everyday picture
Two houses with the same rooms and walls (the HTML) can look completely different inside: paint, furniture, lighting. That decoration is CSS. You can redecorate without moving a single wall.
📘What it really is
-
CSS (Cascading Style Sheets) describes how HTML looks: colours, fonts, sizes, spacing, layout, and even simple animations.
-
Keeping looks separate from content means:
- one stylesheet can style a whole site, so a change in one place updates every page;
- the same HTML can be restyled completely;
-
the HTML stays clean and meaningful (Module 12).
-
CSS can be added in three ways:
- External stylesheet (best): a
.cssfile linked from every page; - Internal: a
<style>block in the page's<head>, for that page only; - Inline: a
style="..."attribute on one element. Avoid it: it's hard to find and change later.
🖱️Try it
Create my-first-site/css/style.css. In the <head> of every page, add:
<link rel="stylesheet" href="css/style.css">
In style.css, type body { background: lightyellow; }, save, and refresh each page. All three change at once.
✅Quick check
Your site has 20 pages and you want to change the heading colour everywhere. Where should the change be made?
Show the answer
In the one external stylesheet that every page links to.
An AI fixes a layout bug by adding style="..." to 15 elements. What's the concern?
Show the answer
Inline styles are scattered and hard to maintain. Ask for the fix to go in the stylesheet, using classes.