- within an individual tag
- in the <head>
- in an external file
Style calls placed within an individual tag will only affect that tag, styles placed within the head of the document affect the entire page, and external style sheets affect any Web page that loads the styles.
Styles on Specific Tags
For example this style is called within the <h4> tag:
<h4 style="color: #0000ff;">a blue headline</h4>On a page with that element as well as other <h4> tags, only the element with the style would be blue. If you wanted other <h4> tags to be blue, you would need to define it in a more global style sheet.
Creating styles as an attribute of a tag is a quick way to generate the style you would like without impacting your entire page.
Styles on the Entire Page
To create a style sheet within the head of your HTML document, you enclose it in <style> tags. It is a good idea to define the mime type of the styles you are creating (usually text/css), and then to put the style rules within comment tags so that older browsers do not display them as text on the page. For example:
<head> <style type="text/css"> <!-- h4 { color: blue; } --> </style> </head>This style sheet would cause every <h4> tag on the page to be blue. If you want your entire site to have blue <h4>s then you'd need to use an external style sheet.
Styles on the Entire Site
To create an external style sheet you create a separate document with all of your style information in it and either link or import it into your document.
If you have a large site and would like to maintain consistency across it, then external style sheets are the way to go. They provide you with a simple way to dictate how all instances of various tags will be displayed.
Linking a style sheet
The benefit to linking a style sheet into your document is that it is supported by both the major 4.0 browsers. You call a linked style sheet like this:
<link rel="stylesheet" type="text/css" href="stylesheet.css" />Importing a style sheet
Importing style sheets allow you to keep all your style information in the same place, within the <style> element, while also loading external files as style commands. For example:
<style> @import URL (http://yoursite.com/stylesheet.css); h4 { color: #0000ff; } </style> Next page > Cascading - What does it mean? > Page 1, 2, 3, 4
Previous Features