Forum Moderators: open
Is it possible to give this style sheet a title? If so, where would I include it?
<style type="text/css">
@import "whateva.css";
</style>
Thanks
Nick
Can you accomplish what you want by using /* comments */ or "descriptive-naming-methods.css" conventions?
I find myself using the latter method more and more. Another thing to consider is using multiple directories for your style sheets:
products/may-new-items.css
products/june-sale-items.css
tutorials/three-column-liquid.css
tutorials/list-items.css
site-one/global.css
site-one/red-style.css
site-one/gray-blue.css
I never hesitate to use descriptions that I can decipher later... it helps a lot!
Hello pcguru333!
Both methods will reference external style sheets. The @import method is often used to hide styles from NN4 and other older user-agents that might have difficulty with the included styles. This is great method to "let loose" with your CSS creativity, while still serving useable content to NN4 surfers.
madcat, what are you trying to accomplish with assigning a title to an individual style sheet?
I beleive that it assists the browser in the caching of the sheet.
I presume that is what he's after. If not then a descriptive title is much more useful...
Nick
Anyway, it only works when the alternate style sheets and default sheets utilize the <link> tag. I knew that using the @import directive could hide styles from Navigator 4.x -- so I felt I should use it. I don't have that browser installed so I'm wondering about what the site will look like in those 4.x browsers without the directive. hope that makes sense, I had to change the url in the profile.
using multiple directories for your style sheets
Thanks for your help everyone
The style-switcher script works flawlessly in IE but fails in Opera, which does not process the javascript, but does display your default stylesheet.
Using Mozilla, no styles were rendered, this may be due to the MIME type associated with CSS on some Apache servers.
Mozilla goes by strict interpretation and will NOT render CSS unless the MIME type present is text/css css instead of the common (but technically incorrect) text/css text.
I saw this first hand after viewing a site first using using my other browsers and then using Mozilla. I had to create an .htaccess file and add the following: AddType text/css css. Anyhow, that MAY be why Mozilla is not displaying your default style sheet.
how many sheets do you use on each site on average?
Good question! As many, or as few as is optimal.
On some sites, a single style sheet can supply all the required styles, but what if, on your 500 page site, you have four pages that differ radically in layout and styling from the majority of your site? Do you want to add the style declarations for these unique pages to your general stylesheet? Or would you rather cache the most common styles and use "wait-until-needed" with the others?
For demonstration puposes, lets say you had a main.css or global.css style sheet that held all the commonly shared heading, paragragh, blockqoute, list and anchor styles. Now lets say that a number of pages on your site also had styles unique to that page alone... perhaps positioning declarations or unique background-images. It would make sense to use multiple style sheets in these instances: one for the "global styles" and a second for the "page-unique" styles.
Your might also have "template" styles: style sheets created for distinct layouts, e.g. two-column fixed, three-column fluid, right-side menu, and so on.
But let's go further still, lets say that some of your pages use a white background-color while others use a black.
Then you might see something like this:
<link rel="stylesheet" type="text/css" href="css/global.css" />
/ * universal site-wide styles */
<link rel="stylesheet" type="text/css" href="css/halloween-costumes.css" />
/ * page specific */
<link rel="stylesheet" type="text/css" href="layouts/three-column-rt-menu.css" />
/* layout template */
<link rel="stylesheet" type="text/css" href="color-schemes/black-silver.css" />
/* color scheme related styles */
The above example might be a little extreme for most situations, but depending on the size and diversity of a site, it might provide an optimal solution.
I've seen some HUGE style sheets, 20kb and more! Overkill? Almost certainly. Most of mine average just 1kb.
Managing style sheets may not be required for most developers yet, but planning ahead not only will save time and effort, it will present an opportunity for style flexibility without "painting-yourself-in-a-corner" that COULD occur if you shoot for the one-size fits all styles sheet.
Find the happy medium!
I't neat to keep all you css in one dir like this:
css/
// contains...
stylesheet.css // for regular stuff
forms.css // forms specifics styles
some_page_that_needs_extra.css // for the odd thing here and there.
Nick
how many sheets do you use on each site on average?
I'd like to hear what others are doing too.
Myself, I categorize stylesheets as either global (affects the whole site) and local (affects only a single part of the site).
Typically, I use one global stylesheet and zero or more local stylesheets.
global.css (global) = defines all of the standard (x)html elements, classes, and ids that are used throughout the site. For standard web sites, this is usually all I need.
local.css (local) = defines or redefines (x)html elements, classes, and ids in those sections of the site that require special treatment (such as web application interfaces). I make heavy use of multiple instances of local.css in the corporate intranet I maintain in my day job.
I will usually have a couple of variations of each to deal with cross-browser compatability issues (i.e., seperate stylesheets for Netscape 4.x).
All I want to do is replace the <link> tag with the @import directive for my main (normal) css doc...
<link rel="stylesheet" type="text/css" media="screen" title="normal" href="wages.css" />
<style type="text/css" title="normal">
@import "wages.css";
</style>
My 'view changer (which is so cool to have for those 1024*768 reso.)' no longer works with the directive. The first page shows how--the rest just use the <link> tag. The confusion comes from thinking these are the same thing.
--Any way to workaround this or a better solution? Is it more beneficial to use the directive in this case?
Thanks for any help.
How's it look in IE etc?
If the purpose is to exclude nn4 then your media="screen" will do the job just as well.
Nick
media="screen" will do the job just as well
Cool. Basically what I'm trying to figure out.
