HTML Cheat Sheet

Styling with CSS

Overview

Cascading Style Sheets (CSS) are used to make your site look pretty. The gist of it is that we specify elements and what styling we want them to have. To do this we need a special way of writting our rules.

In the example below I've first given you an example of the structure of these rules, then given an actual example. We will explain the terms: selector, property and value next, but try and figure them out just from the example!

CSS

selector {
    property: value;
}

div {
    background-color: green;
}

HTML

<div>Style me!</div>

RESULT

Style me!

A selector is kind of like a search term, it's what we use to specify the element we want to style. More on those in a bit. A property is mearly the thing you want to change about that element, for example the background-color, color or margin. Lastly we have the value for that property, so this could be a color like green or red, or a more numerical value like 10px or 50% depending on the property.

Note the curly braces {} and the semi colons, these are necessary! If you put them in the wrong places you might get a very funky looking website.

Linking CSS

So before we continue we will run through how we can get CSS working on your site. There's a few different ways to do it but we are only concerned with the proper way! By now you should have some HTML files, your CSS is going to be a completely different file. So go in to your text editor and save a blank file called 'awesome.css', if you're stuck (or lazy) just download my awesome.css you can also grab the awesome.html too.

Now we want to link this awesome.css file to your site. You need to add a LINK tag to the HEAD of your page, so your final page will look something like:

HTML

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="awesome.css">
    </head>
    <body>
        .. Amazing stuff here ..
    </body>
</html>

You'll know if it worked as your background will turn blue. If that hasn't worked, make sure you've put your link tag in the right place.

Selectors

So we have a few different types of selectors.

Element / Tag

We can select things just based on their tag, eg p, b or table tags.

CSS

p {
    background-color: green;
}

HTML

<p>I'm styled with an element selector!</p>

RESULT

I'm styled with an element selector!

Class

We can style things by giving them a class attribute. Notice we now have to put a dot in front of our class name so that your browser knows to look for a class called tute rather than a tag called tute.

CSS

.tute {
    background-color: yellow;
}

HTML

<p class='tute'>I'm styled with a class selector!</p>

RESULT

I'm styled with a class selector!

Identifier

Lastly we have identifiers, I'd discourage their usage but for the sake of completeness here it is! We use a hash this time to tell the browser to look for an id rather than a tag or class.

CSS

#bob {
    background-color: pink;
}

HTML

<p id='bob'>I'm styled with an id selector!</p>

RESULT

I'm styled with an id selector!

Properties and Values

Here's a breakdown and example of some of the frequently used properties I use.

Property Some Possible Values
background-color blue, pink, red, green, #00000
color blue, pink, red, green, #00000
margin 5px, 10px, 20%
padding 5px, 10px, 20%
border 5px solid pink
font-family Arial, Times, Helvetica, Courier
font-size 5px, 10px, 20%
line-height 5px, 10px, 20%

Here's a neat color picker which you can use for background-color or color values. This is not a complete list of properties! Use Google to find you more!

CSS

div {
    background-color: pink;
    border: 5px solid green;
    font-family: Courier;
    margin: 10px;
}
.tute {
    background-color: yellow;
    border: 10px dotted black;
    font-size: 10px;
    padding: 10px;
}

HTML

<div>Tag selector</div>
<p class='tute'>Class selector!</p>

RESULT

Tag selector

Class selector!

Again just go and experiment! Good luck making some nice looking pages!