click for English language website click for Spanish language website

A Beginners Guide to CSS: Part 1

Welcome to CSS! This tutorial follows on directly from the Beginners Guides to HTML, I would advise reading that first unless you have a basic understanding of HTML already.

CSS stands for Cascading Style Sheets. It controls the look and feel of a website. The colours, the fonts, the placements, the visual styles you use, how boxes on your website fit together visually.

I like to think of CSS as coding for artists. It is very much a visual tool, turning code into a form of art.

HTML and CSS go together like two peas in a pod. HTML provides the building blocks while CSS makes those blocks look great.

As we mentioned in a previous tutorial, HTML is made up of blocks known as divs. Each block is created in HTML, and any content (written articles for example) is created within the HTML code. CSS is then used to create and manipulate the visual style – so let us begin!

First off let's check our CSS is up and running properly. In our HTML we have already created our link to the CSS file:

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

Above I have called the CSS file index.css . Make sure your CSS file is called exactly this (case sensitive) or it won't work. Now the 2 pages are linked together we can begin on the CSS.

We can begin by modifying the style of the entire website. This is a powerful tool but never forget that it will modify every HTML page your CSS file links to so use it wisely!

We do this by creating a style for <body> tag in our CSS document:

body { font-family: Verdana, Arial; color: white; font-size: 1em; background-color: black; }

Above we have created a style for body . Please note that body is a pre-defined name (such as nav, footer, header as discussed earlier). Therefore we simply write it as body and this will work.

If you are manipulating a box which has an id in the HTML then you use a hash tag to indicate an id in the CSS code.

So for example:

<div id='container'>

in the HTML would become in the CSS:

#container

If it is a class you are manipulating then you use a dot instead of a hash tag For example .classname . If you are ever ensure why your CSS isn't working this is often why.

Back to the code:

font-family: Verdana, Arial; color: white; font-size: 1em;

This is defining the default font on all our HTML pages. It is telling the browser to create a Verdana font if recognised by the browser, if not then it will use an Arial font. The font is set by default to white (make sure to always provide good contrast with the page background!).

We then set the font-size to 1em. This effectively tells the browsers to render a font at 100% of the default size of the browser. 1.1em would render at 110% etc. You can also use other units of measurements – pixels are common. For example you could write 16px as the default size.

This will set the font used everywhere – although you can override it wherever you choose to, such as if you want a specific paragraph on a specific page to render differently.

Afterwards we edit the background colour:

background-color: black;

Note that you can create a background colour just using words, such as red, green, etc. You can also use RGB codes such as #000000 or #FFFFFF for black and white. I would recommend using a colour picker on the internet to choose 3 or 4 colours on a web page that complement each other well.

It is of course possible to set an image as a background. Repeating/tiling backgrounds are frequently used, as are single images – just try and be tasteful and suttle!

To create a background image:

background-image: url('images/nameofimage.jpg'); background-repeat:repeat;

This will create a repeating background image. It looks in a folder called 'images' in your directory. You can then set an image to repeat horizontally, vertically or in both directions and much more. Take a look at W3Schools website if you want to learn more about web backgrounds.

Also for all you Brits out there (myself included), CSS code is written in American English so color, not colour etc. Make sure you test your CSS code as you go – if you are following this tutorial you should see white text on a black background!

If not go back and make sure all the key names are spelt correctly, make sure any boxes in your HTML are nested properly and make sure you have used the right identifiers in the CSS (e.g. is it a class or an identifier?).