Using Stylesheets
By kunal on Dec 06, 2009 with Comments 0
You can place styles in three locations: stylesheets, <style>, and style. A stylesheet is an independent file that you can attach to an HTML document using the <link> element or CSS’s @import statement. <style> is an HTML element that you can embed within the HTML document itself. style is an attribute that can be embedded within any HTML element. I recommend putting styles in stylesheets. This reduces noncontent in your HTML documents, and it puts all your styles in files that are easily managed.
I recommend naming stylesheets using single-word, lowercase names. This keeps stylesheet names simple and easy to remember, and works safely in all operating systems. I suggest you use a name that describes the scope and purpose of the stylesheet, such as site.css, page.css, handheld.css, print.css, and so forth. The standard extension for a
stylesheet is .css. The standard Internet media type is text/css. I recommend using the location of a stylesheet to control its scope. If a stylesheet is for an entire web site, you could place it in the root directory of the web site. If a stylesheet applies only to a document, you could place it in the same directory as the document. To link a stylesheet to an HTML document, you can include a <link> element in the <head> section of HTML documents, and you can place the URI of the stylesheet within the href attribute of the <link> element. Listing 1-1 shows the stylesheet links that I use in each example in this book. See the Header Elements and Conditional Stylesheet design patterns in
Listing 1-1. Attaching Stylesheets
<link rel=”stylesheet” href=”site.css” media=”all” type=”text/css” />
<link rel=”stylesheet” href=”page.css” media=”all” type=”text/css” />
<link rel=”stylesheet” href=”print.css” media=”print” type=”text/css” />
<!–[if lte IE 6]>
<link rel=”stylesheet” href=”ie6.css” media=”all” type=”text/css” />
<![endif]–>
For increased download performance, you may want to include page-specific styles in the <style> element instead of in a separate page-specific stylesheet. Since these styles are page specific, there is little disadvantage to putting these styles in the header of the page. On the other hand, I do strongly recommend against using the style attribute of HTML elements because this creates very hard-to-maintain code.
Related posts:
- Using Cascade Order CSS allows you to assign the same rule to the...
- Styling for Print You can use a specific style sheet to style content...
- Adding styles to a web page The most common (and useful) method of applying CSS rules...
Related posts brought to you by Yet Another Related Posts Plugin.
Filed Under: CSS Advanced • CSS Basic • CSS Examples
