Helping ordinary people create extraordinary websites!
| |
Helping ordinary people create extraordinary websites! |
An Introduction to CSSBy Ben Hunt2007-12-17 
Separate style sheets
The ideal way to define styles for your HTML elements is to put the definitions in a separate stylesheet document. Then, any page that includes the CSS file will inherit the same styles. (Another benefit of this method is that it enables you to use different style sheets for different user agents - which we'll address in a later article.) HTML pages can include as many CSS files as you need, and the styles will be combined together (according to inheritance & cascading rules we'll get onto later). Code (2 different files): my-styles.css
<head>
<link href="my-styles.css" media="screen" rel="stylesheet" type="text/css" /> </head> <body> <p>Here is some content in a paragraph.</p> <p>Here is another paragraph.</p> </body> How it looks Here is some content in a paragraph. Here is another paragraph. Note that, again, the styles I defined once have been applied to more than one qualifying element. The difference between this method and the one above is that, because I've defined the styles in a separate stylesheet, all I need to do to apply those styles to another HTML page is include the same stylesheet reference. Tutorial Pages: » The old way to style content » How CSS works » On-page CSS definitions » Separate style sheets » Advantages of separate stylesheets » How CSS styles apply to HTML elements
|
 |
background-color:#ccf;
letter-spacing:.1em;
}
p {
font-style:italic;
font-family:times,serif;
}