What is CSS?
CSS is the code that controls how a web page looks: colours, fonts, spacing and layout.
In real life
If HTML is the house's frame, CSS is the paint, wallpaper and the way the furniture is arranged.
Try it yourself
Switches
This lesson
rosas-bakery.example
Basket (0)
Fresh bread, baked at 6am
Order by 10am, collect after lunch.
Sourdough loaf
£4.00
Cinnamon bun
£2.50
Lemon cake
£3.00
The code behind it (simplified)
HTML: what's on the page
<h1>Fresh bread, baked at 6am</h1>
<p>Order by 10am, collect after lunch.</p>
<li class="card">
<img src="sourdough.svg" alt="Sourdough loaf">
<h2>Sourdough loaf</h2>
<p>£4.00</p>
<button>Add to basket</button>
</li>CSS: how it looks
.card {
border: 2px solid navy;
border-radius: 20px;
}
button {
background: yellow;
font-weight: bold;
}JavaScript: how it reacts
button.onclick = () => {
basket = basket + 1;
showBasketCount(basket);
};Switch CSS off to see how much of the look comes from it.
Where you will use this
- Track 2, lesson 3: Generate your first appComing soon
- Module 4: Code without fearComing soon
Quick check: CSS
Question 1 of 3