how to CSS

Applying your Style, with CSS

October 7th, 2008

There are several different ways to use styles. There is an oder of importance here. The closer to the element the style is written, the higher it’s importance. An inline style will always outweigh a style in the head, and a style in the head will always outweigh a style in a style sheet. What I would like to stress here, is using inline styles isn’t very cool. It actually goes against the reason of using CSS, which is to separate style from content.

Inline <p style="color: #336699; line-height: 150%;">

Header <style type="text/css"> p {color: #336699; line-height: 150%;} </style>

I don’t personally like to use either of the above methods, though in a recent project I did put styles in the head, but it was because each page had a different background color, and I passed the style using a php variable to a common php include, but I’ll touch on that some other time, it’s out of the scope of this post.

There are two ways of including a stylesheet, and I don’t really see an advantage to either. I’ve read that if you use the import method that the style is applied after the content is loaded, while if you link the style is applied first. I haven’t noticed much of a different. Years ago you would use the import method to hide a stylesheet from older browsers, but we do that using conditionals now.

The @import style can be used in the head of a file, like the link method, but it can also be used in a stylesheet which can come in handy.

@import in the head <style type="text/css"> @import url(’mystylesheet.css’); </style>

@import in a stylesheet - imports must be before styles in that style sheet @import url('mystylesheet.css'); p {color: #336699;}

The link method is my preferred way of attaching a stylesheet from the head of a document <link href="mystyle.css" rel="stylesheet" media="screen" type="text/css">

For really large stylesheets, you may find it beneficial to use a combination of the @import method and the link method. You can link to your stylesheet from the head of your document. Then in your main stylesheet you can use the @import method to bring in multiple stylesheets, like one for structure, one for typography, one for your navigation, etc. For most of my websites I have 2 stylesheets, 1 for everything, and one for fixing ie6. The head of my html files uses a conditional statement. It loads the first style sheet in all browsers, and then it tells the browser if it is less than ie7, to load this other stylesheet.

A conditional stylesheet <link href="styles/default.css" rel="stylesheet" type="text/css" /> <!–[if lt IE 7]> <link rel=”stylesheet” type=”text/css” href=”styles/ie6_style.css” /> <![endif]–>

So there you go, everything you need or want to know about attaching your styles.

Tags: @import, conditional stylesheets, CSS, linking styles, stylesheets

This entry was posted on Tuesday, October 7th, 2008 at 8:22 pm and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.