CSS

What is CSS?

By now we’ve covered enough HTML that you can create your own basic website with text, pictures and links. Hopefully you’ve tried this out and made a couple of web pages of your own.

If you have, there are probably elements on your page which you wish looked a bit different. Maybe you want your pictures to be bigger or your text to be a different colour.

Well this is what CSS is used for.

What does CSS stand for?

CSS stands for Cascading Style Sheets.

That’s quite a mouthful, and not in a good way.

Exactly, so we shorten it to CSS which is easier to say.

With CSS you can make your website look exactly how you want it to. Let’s have a look at how a couple of simple changes will look. The text below has been created with the h1 tag and so looks just like all the other h1 headers we’ve made before.

Now hover your mouse over the text and look how it changes. What do you notice?

Hello World!

With some simple CSS, we can change the colour of the text. Also the text now is in the middle of the page and is now underlined for even more emphasis.

You’re just showing off! Are you going to teach me or not?

Generally, CSS is written as a set of simple, one line statements which set a certain style parameter. When all of these simple statements are added together you get your completely styled website.

As an example, let’s look at changing the colour of the text just like we did with the title shown before. Here is the CSS to change text colour to red.

        color: red;
      

Firstly you need to state which style property you want to change. To change text colour, the parameter is ‘color’. Be careful as this is the American spelling and so is slightly different to the English spelling.

There are loads of these properties, like there are many tags in HTML, but most, like this one, are fairly simple to remember.

The next part is the colon which looks like this :

This tells your code that you have finished naming the CSS property you want to set.

Finally we are ready to set the color property to the value we want; in this case we want red text so we simply write red. Lots of colours are predefined which means you can just write the name of the colour.

Use the box below to try out the names of different colours.

        color:
      

Give Me Food And Tummy Rubs!

Many of the basic colours are included (try blue, green or yellow) but there are also more obscure colours. Give MintCream, DarkMagenta or BurlyWood.

Or my favourite - salmon!

Salmon actually does work, I can’t believe you tried that!

Really?

Actually, you’re right. Of course you did. Food is literally all you think about.

Aria has found her favourite colour!

The final part of a line of CSS code the semicolon which looks like this ;

The semicolon tells the computer you have finished that line of CSS code and you’re ready for a new one.

All basic CSS code follows the same similar structure where the property is named and then the value is set. In the case of our ‘color’ example earlier, how do we know which text will have the colour we chose?

While we have done a great job in setting our text colour, we haven’t told the computer which text to change. There are several ways of doing this, so we will cover this in the next few lessons.