Saturday, January 16, 2010

What is CSS

There are essentially two parts to Cascading Style Sheets:
• the styles
• the stylesheet
What this means is that when you want to learn CSS, you need to learn both the style properties - the styles - and the placement of those properties - 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:

This paragraph has an inline style to change the background color to grey.

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 thetag in the of your Web document.
Here are some tips for working with these stylesheets:
• Start them out right
Use attributes of the

• 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:
1. linking

2. importing (Internet Explorer only)

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:
1. The generic stylesheet

2. The Netscape stylesheet

3. The IE stylesheet (using the import command)

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.
-->

No comments:

Post a Comment