What is CSS?

In this post I said that CSS is one of the codes or languages that have been developed to work with HTML, to improve the efficiency with which the fonts and styling of a website are defined.

So what is CSS?

CSS stands for Cascading Style Sheets and it’s the way the themeing or styling of modern websites is achieved.

Here’s how it works.  

Website styling prior to CSS:

In the early days of websites, before CSS, you had to define each element of your website’s look and feel by hand, and page-by-page.

For example, if you wanted your links to appear in a particular colour you had to define this at the top of each page of your site.

If you later wanted to change the colour of your links, you had to go back to each page of your site and change the settings.

You can imagine how laborious that would have been for someone with a large site – say several hundred pages.

You can also see the scope for mistakes or inconsistencies to creep in – resulting in your links being styled differently on different pages.

Web pages were originally based on tables.  That’s how the page was divided up into the different columns or areas (sidebars, for example).

These tables also had to be defined and styled on a table-by-table basis.

Not only was this highly labour intensive, it meant that each web page contained a lot of code – the stuff that tells the browser how to display the files – and that tended to slow down page-load times.

So CSS was developed, to improve the efficiency of managing the look and feel of websites.

Website styling with CSS.

Prior to CSS the content of the site, and the code that defined the styling, were inter-mingled.

With CSS the principle is to separate the content from the styling, so you can manage each individually.

The advantage of this is that you can first define the look and feel you want for your website then, once that’s done, all you need to do is focus on the content.

Plus, by managing the look and feel separately, you no longer need to change each page when you want to change a styling element.

Taking the example I used earlier: if you want to change the colour of links in your site you only need to make one change in your stylesheet and the new colour will be applied consistently throughout your site.

Much quicker, and no more risk of inconsistencies.

So how does CSS work?

CSS is driven by a file called a Stylesheet. You create the stylesheet as a separate file and you put a link to the stylesheet file in the HEAD section of your website.

This tells the browser where to get the information about how to layout the page.

The stylesheet file is one of the files that the web server will send to the web browser when the link requesting the page is typed in. The description of how that works is here.

With CSS you no longer use tables to define the layout of your page. Instead you use divisions, which are called divs.

So now, when you want to define a sidebar in the page of your site, you no longer have to define the table and all its attributes.  You simply insert the name of the div as an HTML command.  The web browser then takes the div’s definitions from the stylesheet and applies them.

As a result there is a lot less code on the page (in relation to the content) so the page loads more quickly.

The better you become at using CSS the more efficient you can make the styling of your site.

So, to summarise:

  1. The principle of CSS is to separate a website’s styling from its content so they can be managed separately
  2. CSS is driven by a separate file called a stylesheet, which tells the web browser how to layout the page.
  3. To change the style of an element in your website you only need to change that element in one place: the stylesheet.
  4. CSS uses divs, which are defined in the stylesheet, not tables to create separate sections of a web page.
  5. By separating the styling from the content and eliminating the need for tables, CSS reduces the amount of code in relation to content on a page, which results in faster page-load times.

Next post:

Previous post:

What do you think?

Comments on this entry are closed.

  • Karin H. Jun 11, 2009 @ 21:34

    Hi Martin

    Timely article and as always as crystal clear as daylight 😉

    Promised a friend I would help him with his new sites and he’s getting used to CSS, now I have to follow.

    Karin H. (Keep It Simple Sweetheart, specially in business)
    [rq=2384,0,blog][/rq]Marketing: The Devil’s in the simple Details

    • WealthyDragon Jun 11, 2009 @ 22:40

      Hi Karin,

      How’re things..? I’ve been absolutely swamped recently – set up 2 new companies a couple of weeks ago and I’ve been doing websites for them plus a WordPress/Thesis installation… And I still have my day job..! 🙂

      So I have to apologise for being so low profile!

      According to your OOO reply you had a break last weekend, right? Hope it was good!



  • Karin H. Jun 11, 2009 @ 22:56

    Break was good, although I ran into some former colleagues who told me that after 110 years of existence the company I worked for for 19 years has reach the end of the line – a real pity because it means the end of a traditional business in our home town.

    Work is hectic, in a good way 😉 Not much time for my ‘second career’ in between wood flooring projects.

    Hope to hear more about your two new companies soon.

    Karin H
    [rq=2649,0,blog][/rq]Marketing: The Devil’s in the simple Details

    • WealthyDragon Jun 12, 2009 @ 7:03

      Sorry to hear about your old company – that’s tough for everyone involved.

      But I’m delighted the flooring is doing well! If you can do well at times like this you should be in a great position when the economy turns up again. 🙂

      I should be able to spring one of those companies on you in 2 or 3 weeks, maybe less. Just going through the final few things that need doing.



  • Home Business Marketing Jun 13, 2009 @ 23:09

    Finding your blog is really a good thing. So much info and tips to help. Sure will be visiting oftern.