CSS (Cascading Style Sheets) controls how a web page looks — colours, fonts, spacing — separately from the HTML, which holds the content. Edit the live examples and press Run.
1Why CSS, the three ways & syntax
Keeping style in CSS (not in the HTML) means you can restyle a whole site by editing one place. A CSS rule has a selector and property: value; pairs:
p {
color: navy;
font-size: 18px;
}| Way to apply CSS | Where |
|---|---|
| Inline | A style attribute on one tag |
| Internal | A <style> block in the page's head |
| External | A separate .css file linked to the page |
Try a <style> block (internal CSS):
index.html
Preview
Key points
- CSS separates how a page LOOKS from the HTML CONTENT, so one change restyles a whole site.
- A rule = selector { property: value; ... }.
- Apply CSS three ways: inline (style attribute), internal (<style> block), external (.css file).
2Styling text, backgrounds, borders & margins
Common CSS properties:
| Property | Sets |
|---|---|
color | Text colour |
font-size / font-family | Text size / typeface |
background-color | Background colour |
border | A border (width, style, colour) |
margin | Space outside the element |
text-align | left, center, right |
Edit the card's colours, border and spacing, then Run:
index.html
Preview
Key points
- color sets text colour; background-color sets the background; font-size/font-family set the text.
- border draws a border (width, style, colour); margin adds space outside the element.
- text-align positions text (left, center, right).
★ Practical: style a page
Using an internal <style> block:
- Set the page text colour and a background colour.
- Style a heading: centre it and change its font-family and font-size.
- Make a box with a border, margin and padding.
- Use one class selector applied to two different elements.
Ready for the chapter test?
Answer 5 questions. Score 60% or more to mark this chapter complete.
Start the test →💡 Log in to save your progress and earn the certificate.