JB Visions of Thatcham Berkshire

JBVisions of Thatcham Berkshire

Creative web design

Using styles and stylesheets

There are several different methods of applying style to your page. There is a hierarchy of importance though and if you get this wrong it'll drive you nuts.

Inline Styles

The style with the most importance is called an inline style. You apply it directly to the line of code in your page. For example supposing you wanted one word in the middle of a paragraph to be red; you can apply the style to just that word......

Here's the code
HTML
This word is <style="color:red;">red</style>.

Embedded Styles

The style with 2nd importance is called an embedded style. These are style statements contained within the <HEAD> </HEAD> section of the HTML file. For example supposing you wanted one word in the middle of a paragraph to be red and another to be blue.

Here's the code
HTML
This word is <span class="red">red</span> and this one is <span class="blue">blue</span>
CSS
<style type="text/css">
.blue {color:blue;}
.red {color:red;}
</style>

So what's the advantage of using this method instead of inline? Well supposing you want to apply the same style to more than one word throughout the page. Rather than having to put the Style statement on every one, you can just use a class. It's also much easier if you decide you want all your red words to be green. Instead of having to change all the inlines you just change the embedded .red class in the page head.

Remember though that Embedded styles are overridden by Inline styles

External Styles

The style with the least importance but the most use is an External Stylesheet. This is a standalone file saved with an extension of css. It contains all your font sizes, colours and so on and works in a very similar way to Embedded styles, but the big advantage here is that it can be applied to all the pages in your web site.

Think about it. Your site has a red background with lime green text and purple links. It seemed like a good idea at the time but your boss has decided to make the new company logo pink. Now normally you'd have to wade through page after page changing all the colours. Not if you have an external stylesheet. A few quick fixes in the .css file and you're set with a maroon background, pink text and lilac links. Much more suitable.

Don't forget, External Styles are overridden by both Internal and Inline styles.

Here's the code
HTML
This goes in the <head> of each page

<link type="text/css" rel="stylesheet" href="style.css" />
CSS
This is in a separate file called style.css

body {background-color:red;color:lime;}
a:link {color:purple;}



We do much more than just build web sites,
we build customer satisfaction!