Putting css in an html page.

I have a lot of pages where I will need one (or ten) stylings that apply to that page only. It seems to me that, in the long run, putting these css commands in the head of the html page is going to lighten the css size so much that the extra matter in the html page will be worth it.

Any ideas on this? My main style page was getting huge and unwieldy.

I know what you mean Mason. I have a client right now that wants every page just a little different.

I know it's tempting to want to leave that code in the head tag but I don't think I would. That's going to increase the page load speed a bit (maybe by a fraction). How about separating by page names using comment codes on the css page to help you organize? Just my humbled opinion...

Classes are your friend here. As you can have class="this that and the other thing", they really become useful.

or what you could do is make another external css with te extra stuff and link it up that way, just incase you decide to make another page with the same kind of layout. Otherwise i would just say put the extra in your head tag

If the style will never be used on any other page, then there is nothing wrong with it being put on the page directly. Why else would this option be available if it wasn't acceptable? External style sheets are for common styles among all the sheets. If there are one or two isolated styles, most people will put them in the external, but if you have many pages with page specific styles, you might as well just put them with their specific page. The code and overhead is a wash. Probably looking at miliseconds difference, if any at all.

Or you could link an external sheet per page thus maintaining better file structure/organization.

__________________

On a similarish note, sometimes I'm very tempted to give things classes like 'smallItalics' and 'stickToBottom' - well maybe not like that... and then using combinations to make the styles I need, so that I don't have to set them up individually - not exactly seperating content and style though is it?

I'll just have to resist all the time, I guess!

Ryan, you said "classes are your friend"...

can I have a visual? You know me... visual learner!

Reading the original post again, I think I misunderstood, although it could still help keep the size of the CSS file down. Classes can be used together:

Code: Select all

.red {
    color: #f00;
}
.bold {
    font-weight: bold;
}
.uppercase {
    text-transform: uppercase;
}

<p class="red bold uppercase">This text has all three classes applied</p>

Yes, I have a section in every css sheet of standardized single style commands. (In fact, two of them are letter-for-letter identical to Ryan's, even the layout, LOL.)


The problem is, I probably have 50 of them. Every time I need a different left margin, in goes a new class like ".ml22".

The load time on massive external css sheets is appreciable.

You know, I don't know why I didn't look at the problem like this before. The browser is going to load the style in exactly the same amount of time, whether it's in the head or in an external style sheet. If a unique style command is in an external style sheet, it just means that every page on the site has to load it. Not much for a couple of lines of code, but if you have a lot of customization it can easily add an extra 10-15 KB to every page on the site.

So I guess the answer depends on how many pages you expect the user to view. If he's going to browse 15 pages, he might as well cache the entire css. If he's going to read one page and move on, then it makes more sense to have it in the headers.

Of course, the best answer is to modularize pages and not need special styles. It takes a bit of discipline I haven't developed.

Yeah, I know what you mean. Using multiple classes has helped me out a lot in the past. Particularly using .left and .right for floats.

using red, bold and any other limiting name for a css style isn't recommended. For instance, if you decide to change everything to green, your current red tag now makes no sense. Or, if you decide to change them to normal font, now bold makes no sense. Unless you plan to change the red tag to green in all your pages, or take the bold tag out. In this case, you have completely ruined the concept of a style sheet.

A better choice would be to use "color1", "color2", etc.

For font styles you would have "font1", "font2", etc.

These still have limitations, but at least you can define color1 with any font color or background color and it still makes sense. Same for font1, you can define any font styling and the tag still makes sense. Unlike bold where adding "text-decoration: underline" would not make sense.

I personally like using class names that make sense. If I'm going to be changing the CSS on a site, chances are it's a major update and I don't mind updating the XHTML if it means I don't have to reference each class to find the correct one I want to use in day to day updates.

having classes like red and bold is not seperating style from content at all... or did I misunderstand you?

There's a difference between class="red" and style="color: red;"

Using class names that depict their meaning doesn't mean you're combining structure and presentation.

Snow didn't say seperating structure, he said style. Snow is correct, by using classes like red and bold you are attaching specific styling to the html. By having to go in and change the html to change the styling just proves it. It completely destroys the concept of a style sheet. You might as well put style="color: red;" because it takes the same effort to change the class tag from red to blue as it would to change style="color: red;" to style="color: blue;".

The purpose of a style sheet is to be able to change just the style sheet to update the entire site. You can still do so by assigning the color blue to class red, but again... if you do this with too many styles you have a clusterf of style sheet. Bold is now normal, blue is now red, green is now yellow, underline is now no-underline... would make no sense.

I understand what you're saying, but I'm just going to have to respectfully disagree. It seems by your standards you should apply a class to everything even if it's not needed at the moment, because some day, who knows if you'll need it or not. Having an almost universal structure (i.e. csszengarden) requires too much code that's never going to be needed in your average site.

In addition, I would never use a bolding class, I would use <strong>, which would require me to change the XHTML unless I wanted <strong> to look universally unbolded on my site.

All in all, I refuse to use .class1, .class2, .class3, .class4 and so on to control my layouts.

I have to agree with Ryan here.

As a purveyor of SEO wizardry, part of my job function is ON-page SEO.... unnessesary code (code bloat) just doesn't sit well with me, when I go to great lengths to get code size to a minimum to lower the code to content ratio.... the small the better

Also, why send Mr Browser ANYTHING that does bugger all?

It's like going on holiday and taking everything in your house - you wont need it! keep the stuff you NEED, ditch the stuff you dont - that has been the fundamental rule of all good coders since coding began, and that isnt going to change.

__________________
Click the 'Thanks!' button if this post has helped you

Rob - Webforumz Founder

That's not true at all. I'm surprised you can't understand the issue here. The issue is a class called RED vs a class called COLOR1. COLOR1 class can be reassigned "IN THE STYLE SHEET" to whatever color you want and the tag name COLOR1 still makes sense. A class named RED cannot be reassigned to color BLUE without things eventually getting confusing.

And you don't need to assign everything a class name because you can refer to subelements within an assignment... ie ... ".nav ul" or ".nav ul li"... etc. etc..