Introduction to CSS

What is CSS?

Simply it gives style to a webpage.

It changes our website from this:

Screen Shot 2013-12-12 at 15.54.30

To this:

Screen Shot 2013-12-12 at 15.54.48

More specifically a CSS file is used to give styles to HTML elements. Before CSS, a style was added to HTML elements on each and every element. This is okay if you only have a few elements but when you have 100s it becomes labour intensive and this is where the CSS style sheets comes in. You can target multiple HTML elements and give them all the same style in one set of code.

 So how do you use CSS?

First of all we need to create a CSS file and include it in our HTML (see our ‘The basics of HTML Coding’  post for how to set up a HTML document)

So just create a new text file and call it styles.css and save it in the same folder as your HTML file.
Now in the head of our HTML file we need to include a reference to this file

<link rel="stylesheet" href="styles.css" type="text/css" media=“screen">

So hopefully your HTML is now something like this:

<html lang = "en">
<!-- Basic.html -->
<meta charset = "UTF-8" />
<link rel="stylesheet" href="styles.css" type="text/css" media="screen">


<h1>Level One Heading</h1>
<p>This is a paragraph (example 1)</p>
<p class=“blue”>This is a paragraph (example 2)</p>
<p>This is a paragraph (example 3)</p>

Now at this point the page should still look like this:

Screen Shot 2013-12-13 at 10.00.10

In our styles.css we can now start making this look a bit better:

body {
background-color: rgb(244, 244, 244);

h1 {
font-family: Arial;
text-align: center;
color: rgb(102, 102, 102);

p {
font-family: Arial;
color: rgb(215, 67, 46)
margin-left: 50px;
margin-bottom: 30px;

.blue {
color: rgb(21, 106, 235);

By applying the above we have changed our page to look like this:

Screen Shot 2013-12-12 at 15.55.11

So how does this code work?

(a) The Selector (body, h1, p , .blue)
This is how we select the HTML element, anything inside the following ‘{  }’ will give style to the selector. (See how a leading ‘.’ targets the element’s class in the .blue selector).

(b) The Property (background-color, font-family etc…)
These are what we use to give the style to the elements, they consist of a property, e.g. ‘color:’, and a value, e.g. ‘rgb(102, 102, 102);’. Note the way these are written with a colon after the property and a semi-colon after the value.

Now you can start to add styles to your own site giving it colour and shape.

For a complete list of CSS properties see this site


Matt Scott

Web Developer

Matt Scott