Benefits of Cascading Style Sheets (CSS)
November 12, 2007 by Jeff Adams
First off, its important to realise that CSS isn’t as complicated as it sounds. There used to be a time when all web designers used tricks such as image rollovers for links, full pages designed in tables and used to have to format the text as they went along.
To best understand CSS is to think about a word processor like Microsoft Word. You have the options in there to change the font style, the colour, whether it is bold or underlined etc. With CSS not only can you set this yourself, you can apply different styles to different elements – like your headers, the way your links look and behave, lists. Not only that, as you store these separately you can change ONE file and the entire site changes its look immediately. Now that is power.
For the clients and site owners, it allows you to get your designers to change things on the fly – don’t like the font? Try another one and see the difference immediately!
For designers, the real power is the ability to position objects, control dimensions of where your content is on the page. Previously it was tables that did these for you, but the problem with those is one slight tweak or too much text used to push everything else the wrong way or have un-wanted results. Now you can tweak your CSS, hit the refresh button and sit back safe in the knowledge the simple changing of the width fixed the problem.
So what else can you do? Well the most common features in use today by designers is the layout of content. You can position divisions (DIV’s) for which your content goes in. Not only can you position it, you can also affect all the styling inside that one division.
An example would be:
.divMyContent {
height:300px;
width: 400px;
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
}
What the above is doing, is making a division 300 pixels wide and 400 high. Its telling the browser than all the text inside should be from the Arial family and 10 pixels in size.
Of course this is a very basic example and there are no position statements, but you should get the idea of the amount of power at a designer’s disposal.
Another huge plus for using Cascading Style Sheets (CSS) in web design is for accessibility. CSS allows the visually impaired to easily increase the size of your fonts or indeed the whole page, and this means they aren’t restricted by your set point size or an image which is holding the text and cannot be re-sized.
In brief here are some more benefits of using Cascading Style Sheets (CSS)
- More accessible – as described above, the font-size and other elements can be increased in size making it more easily read.
- More search engine friendly – search engines use spiders. They cannot read images, they can see what’s in them. Therefore as you are using text, the spiders can read those a hell of a lot better.
- Faster download times – with tables, the browser has to read through the tables twice. Once is for the structure of the table and again for the actual content. Tables also tend to use spacer images which in turn take download time.
- Separate content from presentation – you can separate the actual coding or HTML mark-up for your pages from the actual presentation e.g. how the text looks.
- Maintenance – you can make site wide changes easily through one CSS file. Sites that are being updated by more than one person make it easier to control how everything is looking.