Internet Business Centre - information for online business

Marketing Materials - Save up to 80%

1. CSS Introduction

Cascading Style Sheets (CSS), were defined by the World Wide Web Consortium (W3C), and not by some evil maniac with too much time on their hands, to develop a standard which could be interpreted by different browsers. This became a necessity as Microsoft and Netscape battled for world domination and kept adding html attributes which were only understood by their browser. Great for them, headache for us.

Now, through the implementation of CSS, we can theoretically design just one website for all browsers instead of multiple websites, one for each browser. What started out as a way of standardizing the way code was displayed through basic things, like font and color tags, has quickly grown into something much more powerful, which makes sense because all of us regular maniacs could now spend more time working on the one standard which could be understood by all browsers.

There is of course a fly in the utopian ointment, but there would be wouldn’t there. You know where I said that CSS was a standard that bridged the great divide between Microsoft and everyone else? Well it’s not entirely true. For a lot of the basic stuff it is, but when you get into some of the layout possibilities, it goes a tad pear-shaped. The upshot of this is that you still have to make sure that if you develop a site in Firefox for example, you still have to check it in IE version whatever. You should be doing that anyway,but it’s a bit of a shame none the less.

CSS can be utilized in your web pages a couple different ways.

The first way which takes priority over the others is what is known as Inline CSS and is used inside the html tag directly and only affects what is inside that element. This is a useful method when you are doing something like adding a Drop Cap or something which will only be used once or twice and you don’t want to clutter up your External Style Sheet.

The second, and the one that takes priority over an External Style Sheet but not Inline CSS is the Internal Style Sheet which is placed in head of your page between the andtags. You might want to use this when you only have one page on your website or you need a page to look differently than the other pages which use your main CSS External Stylesheet. You could then use your Inline Style Sheets to overwrite anything on a line by line basis should you need to. Don’t forget the Inline CSS takes priority over the others.

The third method is the External Style Sheet. This is an external document which is not included within your web page. By placing some code in the head of your web page between the andtags, you tell your web page to look for and use the instructions from that file to interpret how to display your pages.

This method is useful when you have two or more pages and will allow you to control the look across all of your pages maintaining a consistent look throughout.

Why is this a great time saver? Just imagine what will happen when the guru’s and wannabe’s, decide the BIG, RED, BOLD HEADLINES are no longer cool! With External Style Sheets, you can just edit your .css file (external style sheet), et voila, all the pages change!

So what happens when you are using inline css, internal css, and external css at the same time?

Well this is where the word “cascading” comes onto the scene. Let’s say that you have an External Style Sheet which sets the look for your entire site. On one page in particular you add some new elements and some inline css which differs from what you’ve outlined in your external style sheet.

Everything will “cascade” or fall into place. It will first use any inline code, then it will look for any internal code in your pages head and then it will use any external style sheet. If you’ve used inline code to change the color and font of one particular paragraph, the rest of the paragraphs and all other elements will still be defined by the external style sheet. So “cascading”, geddit?

Comments are closed.