If you are a frequent user of the web, you’ve surely browsed a site styled by Cascading Styles Sheets. CSS has made a huge difference in the world of web design. They offer you the ability to change the entire look and feel of a site without having to edit countless sub pages. In the next few paragraphs we will see why CSS is practical and how it is being used to revolutionize web design as well as taking a look at an example of CSS in action.
Anybody who has written html code is familiar with the html [font] tag knows that it is used to make changes to the letter styling, size and color (to name a few). It is a vital tag for the novice webpage designer. However, it can pose some problems in making updates and design changes.
Consider the following example: A site with 3 pages where each page has 3 paragraphs. The first paragraph is written in a 10pt. red font while the second one is written in a 20pt. green font and the third is written in 12pt. black, bolded, and italicized font. We now have a problem! Aside from having an eyesore of a site, if we decide to change the current style we have, we need to edit 3 different pages, each with 3 different font tags. Now imagine this for an entire website! You can see that this will be a very tedious task. This is where CSS comes to the rescue. Had the styles on this site been managed using CSS, you would only need to edit a few lines on your style sheet and the changes would apply (or cascade) throughout the site.
The use of CSS is not limited to the editing of fonts. Far from it. You can change the style of your entire site using CSS. Margins, background colors, image properties and custom bullets are just a few of the style elements that can be modified using CSS. This allows for a consistent look and feel across the site without the hassle of editing every single page. Furthermore, CSS can be used to adjust the placement of objects on a site. As CSS becomes more widely used as a standard, tables will become a thing of the past. This allows for much more freedom in design and makes changing the position of elements of a page much simpler than dealing with tables.
We will now look at an example of CSS in action. Here we have a copy of the New York Times home page on April 6, 2006. As you look at this you may ask, What is the CSS doing on this page? It looks like a regular page to me. In fact you’re right, the end result will be the same weather you use style sheets or not, however it is the process of getting to that result that differs vastly.
Let’s take a look at the same page without CSS. You can disable CSS inside of your web browser. You may find yourself wondering if you’re looking at the same page, but if you scroll down you will see that the content is the same. This massive change was brought about by removing the link to our style sheets (three lines) from the header. This shows us the power of CSS as well as how simple it is to include or remove from our code. Had this page been created without using CSS it would have taken a hour at least to replicate the same thing we did by removing a few lines.
You may find yourself asking, Well what does this mean for me as the proprietor of a website? I don’t manage it, what do I care? It comes down to this: a site like this will be much easier to modify if the bulk of the design changes can be done by editing one or two style sheets as opposed to every single page on the site. This in turns means less hours spent modifying it, which in turn means you pay less for the same work.
Still not convinced? Consider this: CSS is revolutionizing the way we make web pages. It will soon become the standard. Designing a site purely controlled by CSS requires planning but will pay off in the long run. It will take us into the next generation of websites.
