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
Plain HTML is boring
Until now, your webpage has just been black text on a white page, which is rather boring.
In this lesson, we are going to level up your website using CSS.
What is CSS?
In lessons 1-3, you learned how to write websites using a computer language called HTML. As we explored last lesson, HTML builds the structure and content of your website.
CSS is a computer language which creates styling rules for that content. CSS rules apply to elements and change properties of those elements, such as size, colour, and shape.
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 website stops looking like everyone else's!
How CSS works
CSS works by creating rules.
A CSS rule has two parts:
- a selector (what to style)
- a declaration block (how to style it)
In this example:
h1is the selector. This tells CSS which HTML elements to style.coloris the property. This tells CSS which property of the selected element to change.darkblueis the value to change that property to.
💡 Note the spelling of "color". CSS uses the American spelling - try not to mix them up!
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 over 100 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.
Challenge
You changed the colour of your h1 elements. Try changing:
- h2
- h3
- p
Why CSS exists
We could style webpages directly inside HTML, but that quickly becomes messy and difficult to maintain.
CSS allows us to separate structure (HTML) from presentation (design).
This makes websites easier to update and keeps code organised.
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
This new page should be the same colours as your first page.
Step 4: Link your pages
On your homepage (index.html), add a link to your new page:
Now, on your about.html 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;
font-family: consolas, 'Lucida Console', monospace;
background-color: black;
}
💡 CSS selectors can change multiple properties at the same time
Challenge
What has this changed on your page? Does it look better or worse?
Step 6: CSS syntax
In computer programming, punctuation matters. Computers will always do exactly what they are told. If you enter the wrong character in the wrong place, sometimes your program will perform unexpected actions, or not work at all. This is known as a software bug. Fixing these bugs is known as debugging, and is a large part of software engineering.
In CSS,
- { } defines the rule block. This is what contains the styling rules.
- : Separates a property from its value.
- ; Ends a declaration
Challenge
Can you debug these erroneous CSS statements?
Add them to your own CSS stylesheet, fix them, and view your website to see if your fix has worked.
background-color; lightblue:
} h1 {
color="red";
} p {
colour: #00FF00;
font-famly: monospace;
}
Accessibility
Creating weird and wacky designs for your website can be a lot of fun. You absolutely can create webpages with:
- Yellow text on a pink background
- Crazy fonts which you can't read (hello, Wingdings!)
- Eye-melting designs
- Every element you can see moving around the screen randomly
But just because you can, doesn't mean you should.
Good design matters
Just because you can style something does not mean it will be easy to read.
Good websites use colours and layouts that help users understand information clearly.
Professional web developers ensure that their websites have:
- contrast
- readability
- an appropriate font size
- consistency across pages
Step 7: 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!
Step 8: Real-world example
Find a website people use often, like BBC News or Wikipedia. Right click and select 'Inspect Element' to open the dev tools window.
Find the styles tab in this window. This tells you what CSS styles are applied to each element. Try changing some rules. How does this affect how the webpage looks?
Remember, any changes you make will be erased when you refresh the screen.
Press CTRL+U to open the HTML source for the page. Find the stylesheet for that page. Can you open it?
What different styling rules apply to the page? Is there anything which surprises you?
Right now, our CSS rules affect every element of a certain type, such as every <p> or every <h1> tag.
In the next lesson, we will learn how to style specific elements individually using classes and IDs.