By the end of this session you will be able to:
- Understand what CSS is
- Change colours and styles on your website
- Create more pages for your website
- Link pages together
Recap from Week 3
Last week you learned how to:
- Create links
- Add images
- Use useful tags like <br> and <hr>
- Investigate other pages to understand how they work
HTML is boring
Until now, your webpage has just been black text on a white page, which is a bit boring.
In this lesson, we are going to level up your website using CSS.
What is CSS?
Until now, we have been learning how to write websites using a special language called HTML. HTML builds the structure and content of your website. CSS makes it look nice.
Think of it like this; if your website is a house, HTML is the structure (walls, doors, rooms etc.). CSS is the design (colours, paint, style).
This is where your page stops looking like everyone else's!
Step 1: Change the background
Your website already has a CSS file called style.css Open it now.
Add this to your CSS file:
background-color: lightblue;
}
Save and refresh your page.
🎉 If your page changed colour, your CSS is working!
Challenge
Try different colours:
- lightgreen
- lavender
- black
CSS has 140 named colours. Where can you find out the rest of them?
Step 2: Change text colours
Add this to your CSS:
color: darkblue;
}
This changes the colour of all <h1> headings from black to dark blue.
Try changing it to a different colour.
Note the spelling of "color". CSS uses the American spelling - try not to mix them up!
Challenge
You changed the colour of your h1 elements. Try changing:
- h2
- h3
- p
Step 3: From Webpage to Website
Right now, you have one webpage.
A website is made up of multiple webpages linked together.
Challenge
Go to your Neocities dashboard and create a new file called about.html
On this page, add:
- A heading
- A paragraph about you
Step 4: Link your pages
On your homepage (index.html), add a link to your new page:
Now, on your about page, add a link back:
🎉 Your website now has multiple pages!
Try it out - view your site and click your links to move between each page.
Step 5: More styling
Add this to your CSS stylesheet:
color: red;
}
Challenge
What has this changed on your page? Does it look better or worse?
Step 6: Try It Yourself
Improve your website:
- Create another page. You should have 3 pages in total
- Link each of your pages together
- Make your site use at least 3 different colours
Challenge
Compete with your friends to see who can come up with the coolest designs for their site!