Using CSS

Cascading Style Sheets, or CSS for short, are a great way to control the style and layout of a number of web pages from one simple file. You can set up rules for various types of tags and even create multiple classes which will allow you to control every aspect of how your web pages appear online. Best of all if you decide to change the style or layout you only need to edit one file.

To create a style sheet you can write into a word pad or notepad file and simply save it as a .css file. You’ll then need to reference the file in each HTML page within the tags with this line -

Background Images and Color

One of the first things you may want to do is set up your body style which will allow you to define a background color or use a background image. For example -

body {background-color: #FFFFFF; background-image: url(images/blueback.jpg); background-repeat: repeat; font-family: Arial; }

CSS Headers

Next up we’ll set up the rules for your header tags. Header tags are important for search engine optimisation so you should try to use them wherever appropriate. A large header for your article title and then smaller headers for sub-sections works best. To define the style of your header tags in your CSS you should add the following lines.

h1 { font-family: Arial; font-size: 36px; color: #000000; }

h2 { font-family: Arial; font-size: 24px; color: #000000; }

h3 { font-family: Arial; font-size: 20px; color: #000000; }

h4 { font-family: Arial; font-size: 18px; color: #000000; }

h5 { font-family: Arial; font-size: 12px; color: #000000; }

h6 { font-family: Arial; font-size: 8px; color: #000000; }

This will give you six header tags which you would use in your HTML like this -

Main Article Header

Sub-Heading

Different Header Styles

Chances are you won’t need six but you can always use them to create different styles of headers. In addition to selecting the color, font size and font used you can also use the following attributes –

text-decoration: none;

text-align: center;

There are a number of choices for the text-decoration attribute. The names are fairly self explanatory. If you wanted to decorate the text simply replace “none” with one of these options –

overline

line-through

underline

blink

CSS Paragraph Tags

You would set up your paragraph tags in much the same way so you would have a line in your CSS that looks like this –

p {color:#000000; font-size:14px; text-align: left; font-family : Arial; }

Different Paragraph Styles

In terms of visual design, you may find that sometimes you want a different look for your text. While your basic text would appear in paragraph tags as usual.

This is your text.

CSS allows you to create new classes of paragraph tags. For example, you could add the following line to your CSS –

p.center {color:#000000; font-size:14px; text-align: center; font-family : Arial; }

Then in your HTML the text you wanted centered would appear in tags like this.

This is your centred text.

Versatile CSS

As you can see, CSS is a versatile tool and one which allows for a great deal of customisation and freedom in setting up a unique visual style for your web pages.