In this tutorial I want to look at some of the reasons why you should use External Stylesheets and not inline or style tag based definitions.
The tutorial is intended for those learning the basics of CSS and looking for ideas on good practices.
Cascading Style Sheets
Cascading Style Sheets are quite simply a gem in the crown of web development. However, in order to get the most out of them they need to be used porperly. Up until more recently source code and general mark up of an HTML document seemed the last thing on some web developers minds. It seemed all they were interested in was that it looked good in the bowser and not under the hood. As a result website were bloated and full of markup that didn’t correctly define its content.
Luckily we seem to have turned a corner now and most people are stepping up to the mark and looking for ways to improve the markup of their sites and its content. One of the most obivous ways people are doing this is by combining HTML/XHTML and CSS and using them in the manner they were intended.
Whereas HTML defines the relationship of a pages’ content, CSS defines its presentation. Keeping one separate to the other keeps code cleaner, more lightweight and easier to maintain in the future. The following sections look into the three main ways of referencing your pages style and reasons for and against there use.
Using External Stylesheets
External stylesheets allow you to completely separate your CSS from your HTML. Here the style is included in one or more css files and reference from your HTML using the LINK tag:
<link rel="stylesheet" href="/styles/black.css" type="text/css" media="screen" />
Link Tag Stylesheet Attributes
The link tag has the following attributes:
- rel – the relationship of the link to the document
- href – in this case the location of the stylesheet to be included
- type – the type of file it is (in our case text/css)
- media – for what media the stylesheet is to be included
- screen – normal computer browser – on screen
- print – on paper (printer friendly)
- aural – for speech synthesizers
- embossed – intended for Braille printers
- all – intended for all types of media
The benefits of using an external style sheet are:
- everything is stored within a single file.
- once changed/updated, the changes are reflected on all other pages that reference the stylesheet.
- this makes it easier to maintain larger websites.
- pages load quicker once the main CSS file has been cached.
- as a result bandwidth goes down.
- effectively, you’re able to change the entire look and feel of a website through a single file.
Using Inline Styles
My advice would be avoid using inline style definitions – they bloat out your code and are a nightmare to update if you have a lot of them.
However, there times when its easier to use inline CSS styles:
- When you need a quick and instance change
- To override the main stylesheet
- When you don’t have access to the main stylesheet e.g. using a CMS (Content Management System)
Using the STYLE tag
The style tag is placed within a page’s head tag and is intended to only modify the style of the page that includes it. It looks a little smething like this:
<style media="screen" type="text/css">
body{ font-size:20px; }
</style>
This is probably the mid point between the external and the inline styles. Like the inline definitions the style tag is good when you need to make changes to a single document but my advice is only use it when you need to. If you have access to the external stylesheet and if other pages are also going to make use of the same style – UPDATE THE EXTERNAL.
Another good time to use this is when you only have to create one standalone page. There’s no use in creating a new file just for the one file so the STYLE tage is ideal.
Hope that helps folks. Please feel free to leave a comment below feedback via the contact form.
Tutorial Name: Why should I use an External Stylesheet?
By: Tom Jepson
