62
Creating Cool Web Sites with HTML, XHTML, and CSS
I hope that simple example is enough to sell you on CSS as a powerful method for formatting and specifying the presentation of your Web pages!
Sharing a single style sheet The third way that you can work with CSS is to create a completely separate document on your Web server that includes all the styles you want to use. You can then reference that doc ument within all the Web pages on your site. You may think that having a single style defini tion at the top of your page makes it easy to manage the layout of that page. Imagine how handy it would be to have a site with dozens (or hundreds!) of pages of material, all using the appropriate div and span tags and classes. Add to that the capability to change the style across all occurrences of a class, on all pages, with a single edit! To reference a separate style sheet, use the link tag: <link type=”text/css” href=”mystyles.css” />
This refers to a separate style sheet called mystyles.css, stored in the same directory on the same server as the page that contains this link reference. You can also use a fully qualified URL. This is how I reference one of my CSS style sheets on my server: <link type=”text/css”
href=”http://www.intuitive.com/library/shared.css” />
The .css file should contain everything you’d otherwise put between the <style> and </style> tags. For the previous example, the entire mystyles.css might look like this: .manuf { color:blue; font-weight: bold; font-style: italic }
As you develop your site, your shared CSS files will doubtless become longer and longer as you push more of the formatting details into style specifications and out of the HTML tags.
tip
You can edit separate CSS files in NotePad or TextEdit, and they should be saved with a .css filename suffix. For example, styles.css is a common name, and you would include it in your HTML file with this <link type=”text/css” href=”styles.css” /> tag.
The Components of CSS Whether it appears in a style attribute of an HTML tag, within a style block on the top of a Web page, or in a separate document, all CSS specifications have the same general format: name colon value semicolon
Here’s an example: color:blue;.