www.web-design.co.za | anything to do with web design, particularly in South Africa

Introduction to CSS Website Design

CSS or Cascading Style Sheets is modern way to use a website design to create a website layout and apply various styles to the website in conjunction with HTML code. CSS has been a standard in web design for some time and continues to grow as we can see with the new standards being developed in CSS3, the latest version of CSS. This means that it is worth getting to know and worth getting comfortable with using CSS in order to create attractive, accessible websites. CSS is a different type of mark-up from regular HTML in that it does not have tags stored in angle brackets to describe how elements of a webpage are displayed. CSS works according to a set of hierarchical rules where the top most element sets a particular set of behaviour, and any components that inherit from that element will have the same behaviour, unless they explicitly override it.

Traditionally, elements describing how the HTML elements in a webpage should display were included in the normal HTML markup of the webpage but now CSS allows for cleaner web page code and higher quality website design by separating out the code used to describe how the HTML elements should appear.

Below is an example of the HTML code for a very basic web page.

<html>
<head>
<title>This is the title</title>
</head>
<body>This is some text on the page.</body>
</html>


We now want to embellish these html tags by including formatting and style information about they should look in our CSS code. To begin with we will include our CSS code in our html page inside <style></style> tags in the head of our html page.

Our first example shows how to change the background colour of our webpage to black, set the font type to Arial and set the font size to 12px for our simple page created above. You will see that these values are set inside the “body” tag which is a predefined CSS property which defines how the contents of the tags should be displayed. CSS can be used to style most HTML tags.

<html>
<head>
<title>This is the title</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background: #000000;
}
</style>
</head>
<body>This is some text on the page.</body>
</html>


We have seen how CSS can be used within an html page to style how an html element should be displayed but CSS was designed to be contained in a separate file with a .css extension and then referenced from the html page of a website. This type of website design allows for the styling of a web page to be separate from the actual content of a web page thereby “uncluttering” the HTML and producing cleaner code. This is advantageous because it results in a smaller html page which loads faster and allows search engines to crawl the web page more efficiently.

Using our example we now separate the CSS code out of our html into a separate file which we shall call styles.css. It would look like so:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background: #000000;
}


All we then need to do in our html file is to include a reference to our CSS file styles.css. This would be done as follows:

<html>
<head>
<title>This is the title</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>This is some text on the page.</body>
</html>

EDITOR’S NOTE:
If your doctype is XHTML you willl need to close the link tag with a space and forward slash like this:
<link rel="stylesheet" type="text/css" href="styles.css" />

Summmary

We have seen that CSS is a language that is part of website design and is used to describe how HTML elements should be displayed by the browser. We have also described how CSS should be used in a separate file to separate styling from data to allow for clean HTML coding which allows for faster and more efficient web pages resulting in better overall website design.


Article by Donovan Abrey of IT Solutions

Comments

Leave a Reply

Your email address will not be published.

Subscribe

Sign up to receive notifications each time new content is published...
* = required field



Top