Project2 Tutorials

CSS

CSS

Coloured text!

So, what is CSS? Well CSS is the actual styling for your website - we all know pure HTML looks really bad! CSS stands for Cascading Style Sheets.

This tutorial will show you how to make an external stylesheet - meaning all the CSS for you website will be on another file. This helps a lot to make your code neater!

Since we are using an external stylesheet, we need to link it to our main webpage, so your browser knows where to look! We do this by putting the following code into the head tag. (Look here for a basic HTML tutorial)

Lets begin! Start off by making a text and save it as index.css - you can change the name to whatever you want, but remember to change it in the HTML as well!


                <link rel="stylesheet" href="index.css">
            

Now, for some actual CSS! Let's style the body tag! This is how we do it...


                body {
                    styling goes here!
                }
            

So, the body is the selector and it will style all the body tags. You should only have one!
Now lets style!


                body {
                    color: red;
                    font-size: 100px;
                    background-color: #3b3d4e;
                }
            

So what does this mean? Each line of code inside the curley brackets is called a rule.

There are loads of rules for you to use. I have used the color, font-size and background-color rules. These do exactly what you think. Color changes the text color, font-size changes the size of the text in the web page and background-color changes the color of the background.

For coloring, you can use basic colors (such as red or blue) or use hex colors! (we'll cover hex colors in another tutorial)