Cascading Style Sheets (CSS) allows you an efficient way to style up HTML web pages, and this short guide is here to explain how CSS works and the benefits gained from using CSS.
Firstly, the benefits. For many years the de facto method of building web pages was to use tables, with all style instructions written on the page (the dreaded “font” tag springs to mind…). The disadvantage of this was that on large websites, any future changes such as editing the text colour would need to be done on each individual page. This is obviously highly time consuming and hardly cost effective to businesses. CSS allows you to separate the style from the content. This means putting all text styles, positioning and background image instructions into a single separate file and linking to it from each page. Then any future changes need only be done in one place. Other benefits include quicker loading times (due to the smaller individual file sizes) and easier crawl-ability for search engines.
So, how does this CSS thing work then? In its simplest terms, you declare a list of styles to attach to every instance of a particular element in the following format:
<style type=”text/css”>
selector {property: value;}
</style>
Let me break this down – the <style></style> tell the browser to read the code as CSS, the “selector” is the element you want to style up, the “property” is the type of style you want to declare and the “value” is the value assigned to that style. For example, if I wanted to make the text in all “p” tags red, I would use the following CSS declaration:
<style type=”text/css”>
p {color: red;}
</style>
The “;” after the value isn’t strictly necessary in either of these cases, but is necessary when declaring multiple styles within the same curly brackets “{}”.
If you didn’t want all p tags to have red text, you can take this a step further by adding a class to the p tags you want to have a different style and referencing them in the CSS with the “.class” selector:
<p>This text is red.</p>
<p class=”blue”>This text is blue.</p>
<style type=”text/css”>
p{color:red;}
p.blue{color:blue;}
</style>
This will produce the following output:
This text is red.
This text is blue.
I did mention earlier that the CSS is best put into an external file, but all I’ve shown so far is how to write CSS declarations within the HTML page. Let me fix that…
The CSS can go in an external page with a file extension of “.css”. I’ll call mine “stylesheet.css”. Within the <head></head> tags at the top of the HTML page you need to link to this stylesheet like so:
<link rel=”stylesheet” type=”text/css” href=”stylesheet.css” />
There you have it. With a little more research into how to control the various elements and what selectors you can use (W3 Schools is always a good place to start), you should be well on your way to streamlining your web pages!
