BASEWEBMASTER

Brought To You By
Tomlin Ventures Ltd

An Introduction To CSS

Introducing Cascading Style Sheets the basics.

The concept of CSS - cascading style sheets is a simple yet powerful one. Despite the relative simplicity of the language it is very easy to lose your way and new webmasters often struggle to get their desired look using CSS.

Over the following pages we will hopefully help guide the newcomer through the numerous pit falls when using CSS to style a web page.

The language itself is not difficult to understand for example.

CSS
border: solid 1px #000000;

I am sure you will agree it is fairly clear what this is saying i.e. created a border, one pixel thick and black. On the whole CSS styles take on this fairly descriptive form and therefore are very easy to get into.

In addition to the more common styles that you may be familiar with CSS opens up the doors to many other areas of html styling that until now have not been possible, buttons, links, lists all can be styled using CSS and done properly can produce very impressive effects.

A Little History Of CSS.

Style sheets themselves have in fact been around since the seventies but it was not until the mid nineties that the W3C (World Wide Web Consortium) chose two very basic style sheet languages from a number that were available. It was these two languages CHSS - Cascading HTML Style Sheets and SSP - Stream-based Style-sheet Proposal that would come together and form the basic language that we now refer to as CSS.

CSS was designed with the main purpose of separating the presentation of a web page from the markup (HTML) and content. They also allow the webmaster to include multiple style sheets with styles effectively cascading and over writing each other as the page displays.


In the early days although CSS was available it was not supported particularly well by browsers, the first browser to actually achieve a reasonable level of implementation was in fact Internet explorer 5 back in 2000.

Over the next few years the language was extended and improved creating new version, browsers started to follow suit and really we are still in this stage. CSS is still growing and expanding browsers are still trying to catch up and developers are still trying to accommodate browser differences.


On the whole despite a few browser inconsistencies CSS is the future of web design, many of the HTML elements that were once used to style text are no longer acceptable, many are depreciated and some do not exist at all. Table layouts are a no no and its probable that websites that use tables for layout will be or are being penalised by search engines for doing so.

Why Using CSS Is A Good Idea.

Its clear that style sheets are the future but it is also true that getting the same result using CSS as you get by using tables can be hard particularly when creating a flexible layout, I would say 80 - 90% of the forums out there are table driven, if you are creating a website from scratch you really should take the time to use CSS for the layout, it will pay off in the long run.


Where CSS really comes into its own is when managing dynamically created pages like forums. Forums by their nature are likely to have many many pages, often these pages follow a very similar format.

Imagine a scenario where by you have created one such forum but have used html styling, the forum takes off and you soon have over 100,000 pages at this point you decide for whatever reason that you need the change the font color of the title text that appears on each of these pages.

Now you have a big problem because potentially you could be looking at changing each page manually and that will take some time and effort.

If however you had styled you pages using CSS stored within an external style sheet you would only need to change the line in the style sheet which refers to the title text and your done.

Trust me when I say that not only do you want to get your CSS appearance right but also you want to get the actual markup right too.

Now lets look at the CSS language in a bit more depth, hit the next article button below to continue.

Share to Facebook Share to Twitter Digg This Stumble It Share to Reddit Share to Delicious Technorati LinkedIn Google Buzz Blogger More...

blog comments powered by Disqus