Hello and welcome to the second installment of our Web Design Basics tutorial series. In this episode, we will be covering the wonderful world of CSS (Cascading Style Sheets). For those just joining the series, please head to the HTML tutorial, as we will be continuing from where we left off.

Open up your ‘index.html’ file from the previous tutorial. At this stage, it may be a good idea to create a separate directory / folder on your computer to store the files we will be creating (if you have not done so already). By any means, this isn’t essential but it’ll help keep things nice and tidy as we progress.

In this tutorial, we will be learning how to add some colour and style changes to our website. Most web designers and developers spend their time dabbling with HTML and CSS to get the most out of their designs on the web. CSS is responsible for the positioning, style, size, colour, etc on your website. It is best practise to keep your CSS rules in a separate file to keep things consistent, although you can embed CSS rules in your HTML – shown below.

<html>
    <head>
        The <head> stores links to other things the web page needs!
    </head>
    <body style="color:red;">
        Hello World!
        The <body> tag stores the websites content
    </body>
</html>

Note the style=”” code change above. This, unsurprisingly, will change the colour of the text in the <body> tag to red. We can also change the background colour of the <body> to blue. This means that anything inside the <body> tag will have red writing on a blue background. This type of CSS styling is called in-line styling. Simple, right? Good. The fun stuff comes in when designing the structure of your page.

As mentioned before, it is good practise to keep your CSS file separate from the HTML file. Of course, you could keep using inline-styling, but if you are managing a complex website like the BBC homepage, things can get a little tricky! This is why CSS is a good alternative. In order to create a CSS file, open up your text editor and create a new file called ‘style.css’ and save it in the same folder as your ‘index.html’ file. Once you have done that, we need to link the two together. To do this, a special tag is used in the <head> tag, shown below.

<html>
    <head>
        <link rel="stylesheet" id="" href="style.css" type="text/css" media="all">
    </head>
    <body style="color:red;">
        Hello World!
        The <body> tag stores the websites content
    </body>
</html>

The <link> tag will, in essence, pull the requested file into the DOM, ready for the HTML to use. This can be fonts, css documents, javascript amongst other files. Right now, we are concerned with linking out newly created CSS file and our HTML file together, so that we can put the inline-styling in the CSS file. The <link> tag’s href attribute is pointing to the Style.css file we created earlier. If we were to have put style.css in a folder, the href would have to honour that. For example:

<html>
    <head>
        <link rel="stylesheet" id="" href="css/style.css" type="text/css" media="all">
    </head>
    <body style="color:red;">
        Hello World!
        The <body> tag stores the websites content
    </body>
</html>

The best way to test if you have correctly configured your link, is to put the inline styling from the HTML file into the CSS file. CSS is structured differently to HTML in the fact that it does not matter where you place the code, so long as it follows a simple set of instructions. For example, to move the inline-styling from the <body> tag created earlier, into the CSS file, we would do the following (of course, you will have to remove the inline-HTML styling from the HTML file to see the changes:

body{
    color:yellow;
}

As you can see, we have selected the <body> tag in the CSS and opened curly braces ‘{ }’. The styling for that element resides within these curly braces. Note the semicolon after the rule, the semicolon tells the CSS file that it needs to look on the next line (it is good practise to include semicolons after each rule). If we wanted to create the blue background we mentioned earlier, we add the additional rule below:

body{
    color:red;
    background-color:blue;
}

In order to apply different styling to different elements, we would do the following:

head{
    color:green;
    background-color:pink;
}
body{
    color:red;
    background-color:blue;
}

With us so far? Good. Now, we can get a little more complicated with both CSS and HTML but we’ll save that for the next installment!