CSS Magic Studio
Same HTML, a whole new look.
Your mission
Welcome to the studio, designer! A client's webpage has all the right content, but it looks plain. Use CSS to change its colours, text sizes, spacing and alignment, and see every change straight away. Find out how element, class and ID selectors choose what to style, and where CSS can live: inline, internal or external.
Explore
Make five discoveries: change a colour, a text size, the spacing and the alignment, and style something with a class or ID selector.
The page has no design yet: just HTML and the browser's plain default look. Choose what to style, then play with the controls. Every change writes real CSS.
0 of 5 discoveries made
Experiment
Complete all six design jobs, including the "where does the CSS live?" comparison.
Design jobs
0 of 6 jobs done
Challenge
Six client briefs. Some need the studio, some need you to write or fix CSS yourself.
Designer's notes
- p selects every <p>
- .note selects every element with class="note"
- #title selects the one element with id="title"
- A rule: selector { property: value; }
- Padding is space inside the border, margin is space outside it
Finish all 6 briefs to continue.
Understand
Here is what the studio was doing behind the scenes, in the words you need for the exam.
What CSS does
CSS (Cascading Style Sheets) controls how a webpage looks: colours, fonts, sizes, spacing and layout. HTML says what the content is; CSS says how it should appear. Without CSS, the browser shows its plain default style, but every heading, link and image still works.
The parts of a rule
- Selector: p, which elements the rule styles.
- Declaration: color: navy; a property and a value.
- Property: color, what to change.
- Value: navy, what to change it to.
A colon goes between the property and its value, and a semicolon ends each declaration.
Three kinds of selector
| Selector | Matches |
|---|---|
| p | Every p element (element selector) |
| .note | Every element with class="note" (class selector, starts with a dot) |
| #title | The element with id="title" (ID selector, starts with #) |
Use a class for a group of elements that share a style. Use an id for one unique element: the same id should never appear twice on a page. One element can match several rules at once.
Three places to put CSS
| Kind | How it's written | Best for |
|---|---|---|
| Inline | A style attribute on one element: <h1 style="color: purple;"> | A quick change to a single element |
| Internal | A <style> element in the head of the page | Styles for one page |
| External | A separate file, linked in the head: <link rel="stylesheet" href="style.css"> | Many pages sharing one design: edit one file, every page updates |
Words to know
- color / background-color
- The text colour, and the colour behind the element.
- font-size
- How big the text is, for example 18px.
- text-align
- left, center or right alignment of the text.
- padding
- Space inside the element, between its content and its border.
- margin
- Space outside the element, between its border and its neighbours.
- border
- A line around the element, such as 2px solid.
Exam tip
CSS uses colons, not equals signs: color: blue, not color = blue. End every declaration with a semicolon, and give sizes a unit: font-size: 20px, not 20. Check the selector's first character: nothing for an element, a dot for a class, a # for an id.