Your site has bones. Now it needs clothes! Today you'll use CSS to choose colors, fonts and spacing, and make your site easy to read.
About 40 minutes. You can stop and come back. Your answers are saved in this browser.
Last time you learned HTML building blocks. Quick check!
CSS is written as rules. Each rule says which part of the page to style, and how to style it.
h1 {
color: darkorange;
font-size: 40px;
}h1): which part of the page to style.color): what to change.darkorange): what to change it to.{ } hold the rule together, and every line ends with a semicolon ;| Property | What it changes | Example |
|---|---|---|
color | Text color | color: navy; |
background-color | Background color | background-color: lightyellow; |
font-family | The font | font-family: Arial; |
font-size | Text size | font-size: 18px; |
padding | Space inside a box | padding: 16px; |
margin | Space outside a box | margin: 20px; |
border | A line around a box | border: 2px solid navy; |
border-radius | Rounded corners | border-radius: 12px; |
A rule for h1 styles every h1. To style only certain boxes, give them a class. In CSS, a class name starts with a dot.
.card {
background-color: white;
padding: 16px;
border-radius: 12px;
border: 2px solid navy;
}<section class="card">
<h2>My favorite tricks</h2>
...
</section>On your real site, CSS lives in its own file called style.css, in the same folder. One line in the <head> of each page connects it:
<head>
<title>Skate Zone</title>
<link rel="stylesheet" href="style.css">
</head>In the playground today, the CSS goes inside a <style> tag instead, so everything fits in one box. It works the same way.
The HTML is exactly the same each time. Only the CSS changed. That's the power of CSS!
Yellow text on white almost disappears! Readable sites have strong contrast (dark on light, or light on dark), text that isn't too small, and only 2 or 3 main colors.
A role, an example of the style you like and clear limits. Everything from Prompt Pro works for design too!
Rule of thumb: pick one main color, one accent color and one or two fonts. Too many colors and fonts makes a site look messy and hard to read.
Each change below was made by one CSS rule. Pick the rule that did it.
This page has no style yet. Write CSS rules inside the <style> tag to reach the goals. The last goal needs a change in the HTML too!
The playground only runs inside this page. It can't open other websites or change anything on your computer. Your code is saved in this browser, on this device.
Time to use your own chatbot. Missions get harder as you go. Bronze is the one to do today. Silver and Gold are extra challenges for when you want more.
Give your real site its first clothes.
style.css.<link rel="stylesheet" href="style.css"> line inside the head of index.html.Make your sections look like neat cards.
.card rule with a background, padding, rounded corners and a border.class="card" to your sections in the HTML.Get two designs and choose the best.
Your notes are saved right in this browser, on this device. They're never sent anywhere.
Add today's page to your Build Log.
Your Build Log is saved right in this browser, on this device. It's never sent anywhere.
h1 { color: navy; }padding for space inside a box and margin for space outside..card in CSS and class="card" in HTML.style.css, connected with a <link> tag.10 questions, picked at random from a bigger question bank. If you take it again, you'll probably see a different mix. Let's go!
Turn your page into a real multi-page website.