News of the Day

Using CSS: Where to put it

Posted on October 7, 2003 at 12:43 PM in Using CSS | Permalink

As mentioned previously, there are three places where CSS info can be put:

  1. A separate CSS file that is linked to from the HTML file using <link rel="stylesheet" type="text/css" href="/path/to/stylesheet.css" title="default" />
  2. Contained within <style></style> tags in the <head> section of the HTML
  3. In the style="" attribute of an individual tag in the HTML file

Exactly where the CSS information is put is important. The list above is ordered in what I believe to be the best order of placement. The best place to put CSS information is in an external stylesheet file. The use of the <style> section should be used only in specific situations and the use of the style="" attribute should, in my opinion, be outlawed entirely.

Using external stylesheets

  1. You only have to type it once. Changing the one file makes site-wide changes instantly
  2. You site display's quicker. CSS information can end up being quite large. Browsers cache CSS files so that once the first page is displayed, every other page loads quicker. If the CSS information is contained within the HTML page, each page will be much larger & the CSS will have to be loaded for each and every page.
  3. You can make use of the @import hack (info) to protect CSS from older browsers that don't understand some CSS.
  4. From the W3C: User agents may load style sheets selectively (based on media descriptions). i.e. You can have a separate stylesheet for printing (as this site does) or just for screen-readers (for the sight-impaired).
  5. Allows you to combine multiple stylesheet files that 'cascade' into one (Hence Cascading Style Sheets). This can allow you to better organise your style information for easier maintenance.

To create an external stylesheet is quite easy. You create a file called 'styles.css' (or something like that) and put your style information into it. You then save this file on your server (usually in the root directory) and then place a <link rel="stylesheet" type="text/css" href="/styles.css" title="default" /> tag in the <head> section of every page that you want the stylesheet to apply to.

Using the <style> tags

Because of the above advantages, the use of the <style> tag should really be limited to where the style information applies to only the current page. If you are creating a single page that is distinct from the rest of your site (or if your site is only one page) then it would be a waste of time to create a whole separeate CSS file. For example, when I created the tool for using the Javascript RSS aggregator, it was only a single page, so all the style information is contained within that page in the <style> tags. Simple.

Using the style="" attribute

Short answer: don't!

The style="" attribute is there to allow you to specify some style information for a single HTML tag. This attribute has the highest precedence in CSS, which means that if you have an external stylesheet defining something, the style="" attribute can override this. In theory this is good for making a one-off distinction for a tag that is not going to be replicated anywhere else. For example, lets say I wanted a particular paragraph to have blue text and have a yellow background with courier as the font. (Not sure why you'd want to, it looks ugly, but stay with me here) Using this method I would do this:

<p style="color: blue; background-color: yellow; font-family: courier;">This text will be blue with a yellow background and font courier</p>

Which looks like this:

This text will be blue with a yellow background and font courier

(See, it's ugly)

Now this is nice & simple right? Well, maybe not. If you do this once, it's not a great problem, but once you do this a number of different times, it makes maintaining the site very difficult as you have to go digging through the HTML code to make changes. There are also a number of other problems with this:

  1. To put all your style information in like this would take a ridiculously large amount of time
  2. It breaks the rule of separating of content and style.
  3. You can't overrule the style information for different media types (like for printing).
  4. Makes the HTML file larger, which slows down loading times.
  5. It is just inefficient & ugly.

Also, what if in the future I wanted some other paragraphs to have the same format. I would have to go in and add the above code to each paragraph tag. Laborious and pointless. It would be much better to define a class. Classes can be applied multiple times throughout the site and mean that one change in the external stylesheet change everything. How is this done? Well I'm glad you asked.

If I wanted a number of paragraphs to have the format specified above, I would put this code into my stylesheet:

.uglytext
{
color: blue;
background-color: yellow;
font-family: courier;
}

Note the full stop in front of the selector 'uglytext'. This specifies that you are defining a class name. Then, wherever I wanted text to have that format, I would simply put this:

<p class="uglytext">This text will be blue with a yellow background and font courier</p>

On this page there is an example of both methods & you will see that there is no real difference as far as the display goes.

Note also that I could put this class into any tag, not just paragraphs, you can add the class="uglytext" to any tag.

Now, if I wanted one of my paragraphs to be different from any other on the page, I would use an ID attribute. An ID works in pretty much the same way as a class does, except that there can only be one of each ID on each page. This is defined with the id="" attribute in HTML. In the stylesheet, rather than beginning with a full stop as the class definition does, the ID definition starts with a hash (#), so if I wanted an ID called uglytext rather than a class, the stylesheet would be

#uglytext
{
color: blue;
background-color: yellow;
font-family: courier;
}

and the paragraph in the HTML would be

<p id="uglytext">This text will be blue with a yellow background and font courier</p>

You can also combine classes and IDs in the same tag. For a working example of this, have a look at my homepage. The sidebar boxes are constructed using <div> tags that are given the class of "sidebar", which gives them all the same background colour, font size, margins & padding. However, each of them also has a unique ID: Recent Entries is #recententries, See Also is #othersites and the Top Style ad is #tsad.

The Top Style ad is quite different from the others. This is because ID definitions in CSS override class definitions. So while it inherits some of the same attributes as the other sidebar divs, it has it's own border, background-color and padding information.

This is the code in the CSS file:

.sidebar
{
float : left;
width : 240px;
clear : both;
background-color : #DDDCD3;
border : 1px dashed #727056;
padding : 5px 5px 10px 5px;
margin-bottom : 20px;
font-size: x-small;
position :relative;
}

#tsad
{
text-align : left;
background-color : transparent;
border : none;
padding-top : 0px;
padding-bottom : 0px;
padding-left : 15px;
padding-right : 0px;
margin-bottom : 20px;
}

This shows a number of different CSS properties. If you're unfamiliar with any of them, you can look them up on the W3Schools CSS Reference.

Having ranted on about the evils of using the style="" attribute, let me in closing give a couple of caveats.

  1. There will probably be situations where using it is unavoidable. I haven't come across one yet, but I won't say they don't exist.
  2. None of these rules are set in stone, they are guidelines & best-practices. All three ways produce the same result & at the end of the day it's your site, you can do what you want with it.

TrackBack - https://www.typepad.com/services/trackback/6a00d8341f134553ef00e550276e988833

Listed below are links to weblogs that reference Using CSS: Where to put it:

Comments

The tutorial is good. very well said. That is why i prefer to watch videos rather than lengthly explanations that other author may provide. I take this as one of good examples you find other css library here

# Posted by: Paul (58.71.68.89) at Oct 16, 2007 11:42:00 AM

"I wish the real world would just stop hassling me" - Rob Thomas