What is CSS
There are essentially two parts to Cascading Style Sheets:
- the styles
- the stylesheet
Style properties are covered in detail in the styles library and other articles. In this article, you will learn exactly how to place your stylesheets so that you can use them both on one page and all throughout your Web site.
Inline CSS Styles (Without a Stylesheet)
Inline styles are styles set within one tag. They only affect the current tag, every other similar tag on the page will have the default styles. For example, if you want one paragraph to have a grey background, you can use an inline style:
<p style="background-color : #cccccc; border : none;">
This paragraph has an inline style to change the background color to grey.
</p>
The style is defined by the "style" attribute on the element itself.
One Document CSS Stylesheet
If you want to set up a stylesheet to affect one Web page, you can do that with a stylesheet in the head of your document. For this you use the<style></style>tag in the <head> of your Web document.
Here are some tips for working with these stylesheets:
- Start them out right
Use attributes of the <style> tag to define what the browser should expect
<style type="text/css"> - Use comments
Comment tags insure that older browsers don't display your stylesheets.
<style type="text/css">
<!--
style properties
-->
</style> - think about your styles
In many cases, you don't need to set many different styles, just basic ones that cover how your text and other elements should be displayed on your page. If you don't plan to have any red, blinking, 36 point headlines on your page, then defining a style for that is a waste of bandwidth.
Site-Wide Stylesheets
Externally linked stylesheets allow you to use one stylesheet across your entire
site. There are two ways to do this:
- linking
<link rel="stylesheet" type="text/css" href="styles.css"> - importing (Internet Explorer only)
<style type="text/css">
@import URL (http://www.yoursite.com/styles.css);
</style>
The fact that importing is only supported by Internet Explorer allows you to create multiple stylesheets that are browser independent, but without relying on DHTML and JavaScript to detect the browser.
Create three stylesheets:
- a generic one that will cover most basic stylesgeneric.css
- one for Internet Explorerie-styles.css
- one for Netscapens-styles.css
In the head of your document load them in this order:
- The generic stylesheet
<link rel="stylesheet" type="text/css" href="generic.css"> - The Netscape stylesheet
<link rel="stylesheet" type="text/css" href="ns-styles.css"> - The IE stylesheet (using the import command)
<style type="text/css">
@import URL (http://www.yoursite.com/ie-styles.css);
</style>
Because of cascading, the IE stylesheet will "overwrite" style rules found in the Netscape stylesheet, when viewed in Internet Explorer. And Netscape won't load the imported stylesheet at all.
