Delicious Digg Facebook Favorites More Stumbleupon Twitter

Building Your Website – Part 4

What is CSS?

Cascading Style Sheets are the second layer of a web page and deal with the presentational side of the page (page layout, font size, font colour, margins, padding, images…).

In the same vain as discussed above, there are a couple of approaches to using CSS; placing the CSS in the HTML file or using an external CSS file.

Why use an external CSS file?

  • Quicker page load times
  • Share the same file across multiple pages
  • One update applies to all those pages

This guide will focus on implementing CSS to your site using an external CSS file

Creating your external CSS file

CSS syntax is made up of three parts:

Selector{
Property: Value;
}

Although it may seem complicated at first, once you get started it will all fall in to place. All this means is that for each element (e.g. <p>) you determine how a certain aspect of it (e.g. the font) should be presented (e.g. Arial). For example:

P {
Font-family: Arial;
}

h1 {
Font-size: 14pt;
Color: red;
li {list-style: disc;
margin-left: 10px;
}

Here I have stated that any text within a <p> tag should be displayed using the Arial font, my <h1> headers should be 14pt and red, and any bullet lists items (<li>) should use a filled in circle (called a ‘disc’) and there should be a 10px margin to the left.

Note: Your CSS won’t work without the curly brackets and a semi-colon to separate the properties and their values, so don’t forget to add them

Two paragraphs, two styles

In the example code above we have two paragraphs and at the moment they have the same attributes. To mix things up we can give them different styles. We do this using the ‘class selector’.

In your CSS file we state that it is a ‘class’ by using a full stop and naming the class whatever you want. It is best to describe what the class does rather than what is currently is as this may change in time. E.g. name it ‘highlight’ rather than ‘green’, as in the future you may want to use the colour red.

.highlight {
color: green;
}

Now when we want to highlight any text we can apply it to the HTML like this…

<html>
<body>
<h1> Here is my first title </h1>
<p> This is my first paragraph to help me test different types of styles using CSS with my HTML</p>
<h2>This is my second title</h2>
<p class=”highlight”>Here is a second paragraph to see how I can have different styles for the same tag on the same page </p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
</body>
</html>

Class Vs id

There are two ways of specifying and naming attributes; ‘class’ and ‘id’.The difference between the two is the id must be unique within the HTML document and a class can be used as many times as you want. To create an id use a hash:

#highlight {
color: green;
}

(End of Part 4)

3 Responses to “Building Your Website – Part 4”

  1. I must admit this post is very wonderful . Thanks once again for the push!

  2. Enjoyed looking through this, very good stuff, regards .

  3. K2 Designers says:

    You’re welcome, any particular requests for topics?

Leave a Reply

You must be logged in to post a comment.