Getting started - creating your first Cascading style sheet

We recommend you read the Creating a HTML document page before reading this.

Creating a style-sheet is as simple as it gets. Following the same process as in the HTML tutorial, open notepad or your preferred text editor. You are now ready to input your CSS code. Obviously, if you're reading this you, most likely, wont know a lot of CSS.

So, for now input the code as in the picture to the left. What this will do is(after we link the CSS) change the background colour of the HTML page you created earlier. If you're wondering what the '#cddbff' part is, that is just a colour code, we will go into that later.Simple right?

CSS is not a hard language to learn, however we will not go further into the code just yet, you can access the CSS tutorial page if you think you are ready for this. Before we go ahead and save the document I would like to make you aware that there are 3 methods of implementing your CSS code.

How to apply CSS

• External: For this method you create an external CSS file and link it to each of your HTML files. This makes it easy to maintain your site, as a single update of the CSS changes every page of your site.

• Embedded: Using this method, you write the CSS into the HTML file, usually in the HEAD section of the page. This way is inefficient as you would need to update each page individually.

• Inline: The CSS is written in the HTML, however the CSS code is mixed with the HTML. Using this method you would need to go through each line of code and locate the CSS before you could change it. This is considered bad coding.

For the purposes of our tutorials we recommend using external style-sheets as it is by far the most efficient method.

How to link your CSS to your HTML

To link our CSS we need to first save the document. Save the file we were working on as 'style.css'. Make sure to save the file into the same folder as the HTML document we made earlier.

Now, open the html document and input the code as seen to the left. If you open the HTML file with your web browser you should see the page now has a light blue background.