Use CSS properly for efficient web sites

CSS (Cascading Style Sheets) was one of the best things ever to happen to web site development. CSS makes it easier to define the look and format of web pages, and it enables layout and behaviour not possible with HTML alone. I used CSS even on my first web site, in spite of limited browser support, and would never consider coding a site without it.

I’m surprised at how many web developers still write CSS into each web page. This can be seen by viewing the HTML of the pages, easily done with the View > Source command in Internet Explorer, View > Page Source in Firefox, or similar commands in other browsers. Many sites still write their style declarations into the HEAD of each page. This is not an efficient way to use CSS, and is certainly not my preferred method. Here’s an example of this poor practice:

Even worse, I see sites that write their styles as HTML attributes in each element on the web page, e.g.:

What a waste of great potential.

CSS is more powerful if you use an external stylesheet. If you want to make all H1 headers larger or a different colour, or change the layout of the navigation bar, those properties may be altered for all page of the site by editing just a single stylesheet. To me, this is one of the great benefits of CSS: small edits in a single file can change the look of the entire web site.

You might want to employ more than one stylesheet for the site, perhaps one as default for most browsers and another targetting mobile browsers. You may want all layout in one stylesheet and all font properties in another. No problem. A web page can link to and load multiple stylesheets.

To apply an external stylesheet to a web page, insert a “link” element in the HTML HEAD, e.g.:

I created a web site for a small business. One day the client asked me to change the site’s colour theme. This involved the colours of page titles, various levels of text headings, highlighted text, corporate logo on every page, and other elements. Had this information been coded into each page, this would have been a lot of work. As it was, all colour specifications were in a single site-wide stylesheet.

I even had the logo images called from within the stylesheet, so once I had altered the logo colour in graphics software, replacing the logo and changing all element colours was simple. I just changed the colour values in the CSS declarations. A few quick edits to that single .css file and the entire site changed. By using CSS properly when I designed the site, I saved much work later on.