css · level 1 · unit 1 · lesson 1
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
A web page is that a turns into a page.
Every web page is a file of code: instructions written down for a computer. Your browser, the app you visit websites with, reads that code and draws the page on your screen.
A page uses two languages. is the content: the headings, words and pictures. is the look: the colours, sizes and spacing. Same words, new CSS, a whole new look.
In this course you write CSS. Here is a first taste: three lines that paint the big heading tomato red. You will learn to read every part of them two lessons from now.
<h1>Pickles the cat</h1>
<p>Pickles loves long naps.</p>h1 {
color: tomato;
}Press show my page to see it here.
Press run and watch the heading change colour while the words stay exactly the same.
guess first
The words and the CSS disagree. What will you see?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<h1>Everything is red</h1>h1 {
color: blue;
}your turn
Your turn. Paint the heading.
Pick a colour for the heading. Type red, blue, green or purple in place of the blank, then press run.
the page you’re styling
<h1>My first web page</h1>your css
Press show my page to see it here.
- the heading is not black any morenot checked yet
fix it
The stop sign is green. Can you fix it?
the page you’re styling
<h1>Stop!</h1>your css
Press show my page to see it here.
- the stop sign is rednot checked yet
- Look at the colour word in the CSS. Which colour is it asking for?
- The browser does exactly what the CSS says. It says green, so you get green.
- Change
greentored, then press run.
nailed it
you changed the look of a web page. :D
- HTML is the content of a page. CSS is the look.
- A browser reads the code and draws the page.
- The browser follows your CSS exactly, word for word.
new words in your collection
- code
- browser
- HTML
- CSS
This lesson isn’t saved. A free account remembers every lesson you finish.