Is it better to keep your CSS within the head or off page?

Forum Moderators: not2easy

Message Too Old, No Replies

Is it better to keep your CSS within the head or off page?

fctoma

5:16 pm on Aug 14, 2003 (gmt 0)

I've tested both methods...keeping the CSS info in the <head> area and also using a link to point to the CSS sheet...

I know a link to a CSS sheet is easier (uness you use a UNIX build method as I do...with a template) but what is your feelings?

I've always read and understood that the less code and more content on a page is better for the engines. So, my vote would be to keep it off the page and link to it...

Any thoughts?

DrDoc

5:29 pm on Aug 14, 2003 (gmt 0)

Yes, it's much better to keep it off the page. On page CSS sort of defeats the purpose behind CSS.

A linked style sheet has all the benefits.

What's the Unix build method you were talking about?

fctoma

6:25 pm on Aug 14, 2003 (gmt 0)

Thanks for the info.... I agree. Just curious to what others are using. I used to do it on page but recently switched to off page so I could cut down on the non-content part of the HTML page.

We use a UNIX type of "build page". It simply takes a template (usually I call it template.html) and then inside the body of the template I use a #body# tag which when the UNIX command is typed...it will insert a .txt file (with the individual page content) into the place on the template where #BODY# is and meshes it together and wallla...you have a new page. It uploads the page on the server also when you type the "make" command. So... either way to use CSS really doesn't matter in my case since I just have to modify the CSS in the <head> of my template once. One of our sites you can see this example of the template is intelliscribe.net. If you look at the source, from <--BODY CONTENT START--> to <--BODY CONTENT END--> is filled in by a .txt file that I have in the same folder. Everything above and below this two comments is the template...

Thank you for the reply!

photon

6:31 pm on Aug 14, 2003 (gmt 0)

Another advantage to using a link is caching. An external file will load once, then be available in cache for every page that calls it; your CSS is only downloaded one time. If you keep it all in the head, it gets downloaded with every page, adding to bandwidth and slowing down the page load.

fctoma

6:49 pm on Aug 14, 2003 (gmt 0)

OUTSTANDING comment and thank you for the info, much appreciated and overlooked by me.

Purple Martin

5:08 am on Aug 15, 2003 (gmt 0)

General rules of thumb that I follow:

Styles that get used many times get put in an external stylesheet.
Styles that you know will only ever apply to one page get put in the head of that page.
Styles that you know are only ever used once get put in-line in the tag.

It's basically the same principle as considering scope when declaring variables in common programming laguages (VB, Java, many others).
Global vs. Modular vs. Local.

MonkeeSage

5:46 am on Aug 15, 2003 (gmt 0)

External stylesheets also allow for 'themes' that can be changed by the user.

For example:

<link href="fat.css" title="Fat Look" rel="stylesheet" type="text/css"/>
<link href="skinny.css" title="Skinny Look" rel="alternate stylesheet" type="text/css"/>

On a supported browser the user will be able to choose between "Fat Look" and "Skinny Look" at their leisure.

Jordan

photon

12:51 pm on Aug 15, 2003 (gmt 0)

Purple_Martin--

I've been experimenting with multiple style sheets (instead of just one big one) with my latest project. The difference is that I've still put the page specific CSS goes into a separate .css file that is imported for that page only. You don't get any cache benefit, since it's just for a single page, but the SEO benefit is still there.

annej

12:14 am on Aug 16, 2003 (gmt 0)

I have a linked style sheet that applies to all browsers. It has general items like color, font, h1,2 etc. Then I have an imported style sheet that has more details and formats the page. The imported is not shown for Netscape 4 and such. That way the old browsers get some minimal design while the newer browsers get a really great looking CSS based page that would be a mess on N4.

Also by linking the one sheet before importing the second it stops that awful flash of the unformatted page. If you are always on a fast connection you may not be aware that this occurs.

The separate style sheet of sheets make it possible to easily change the look of the whole site . That's the #1 advantage for me.

Purple Martin

10:36 pm on Aug 17, 2003 (gmt 0)

I've been experimenting with multiple style sheets (instead of just one big one) with my latest project. The difference is that I've still put the page specific CSS goes into a separate .css file that is imported for that page only. You don't get any cache benefit, since it's just for a single page, but the SEO benefit is still there.

When you say SEO benefit, are you referring to the code:content ratio? That's a good point.

I recently had another idea: to put all the positioning styles in one .css file, and to put all the text formatting styles in another. There's no advantage from a code point of view, it just makes sense to organise files in a way that groups the styles by what they do.

tedster

11:26 pm on Aug 17, 2003 (gmt 0)

PM - there may well be an advantage. Text styles are pretty well standardized across modern browsers (well, all except complex inheritance), but positioning, margins, etc can still be a nightmare. By seperating the two, you could immediately serve everyone (including NN4!) some basic text styling and then serve up different positioning styles to appropriate browsers.

I've been considering something like that, because I feel so inhibited by cross-browser complications that I often keep my CSS pretty basic.

photon

12:32 pm on Aug 18, 2003 (gmt 0)

Purple_Martin--

Yes, code-to-content ratio is improved, but you also get the good content closer to the top of the code, which I believe also helps with SEO.

I'm starting to think that I need to approach my current project with multiple sheets as you mentioned. My "client" seems more concerned with the colors of the site than the content or positioning. That has made me consider pulling all color attributes out into a separate sheet so that it will be easier to catch them all when it comes time for another change.

And as I look at that I wonder if postioning should come out as well, so that a rearrangement of the site won't involve searching through a large .css file (I've carefully labeled my divs to facilitate future finagling, in the manner of the CSS Zen Garden).

It's starting to make sense to me that, for large projects, I should keep three .css files: one for color, one for positioning, and one for everything else (or is there another subgroup I'm missing?). Then of course there could be other files for specific (groups of) pages.

There could be a slight size hit initially as some items could be repeated three time. For example,

#thisdivid a:hover

could be repeated once in each stylesheet, adding an extra 40 or so bytes to the initial download. I don't think that should be much of an issue though, especially since it would be a one-time penalty with caching.