Introduction to CSS cascading stylesheets
Cascading Style Sheets are a markup language for defining the format of web pages
CSS markup can be placed within a STYLE tag (usually in the document's HEAD) or in an external file. This makes it easy to modify the format of your web pages later without having to edit the HTML markup itself. This is referred to as "clean separation of format (CSS) and content (HTML or XML)."
Using Cascading Style Sheets will also improve your site's performance. If you formatted every paragraph on your page using the HTML markup above, the extra HTML markup would really increase the file's size and download time. By contrast, a single CSS rule can achieve the same effect of formatting every paragraph, no matter how few or many paragraphs are on the page. Also, if you place all of your site's formatting rules into a single shared style sheet file, the browser will download that file only once and reload it from the cache thereafter, further reducing download time.
Finally, CSS markup can be used to format both HTML pages and XML pages, so if you learn CSS markup, this skill will serve you well formatting web content in the future. HTML style sheets allow you to apply styles across a site or change the appearance of all your pages. They let you specify the appearance of a template page which is applied to all pages of a site. The goal of CSS is to provide a way of separating content from formatting. CSS allows you to put your title into a "H1" tag and define its font, size, color and more for all pages where it appears.
You can apply one stylesheet across multiple files by including a link to it in the of your document. Use stylesheets to control the position attributes of block-level elements on a page, or specify the exact attributes of any element on a page. Each element has its own set of attributes, and the appearance of everything inside the block-level elements is affected by those attributes. You can also nest block-level elements.
- Use positioning carefully
- When specifying text attributes, stick to font size and font face attributes
CSS standards
Tutorials about CSS
You can find a streaming audio presentation page at http://media.netscape.com/ including one streaming audio presentation on Introduction to Cascading Style Sheets (CSS1) and a second presentation on Introduction to Cascading Style Sheets Positioning (CSSP). The basic CSSP properties explained there are partially supported in Navigator 4 and Internet Explorer 4 and later and will be fully supported in IExplorer 5 and Navigator 5. These CSSP properties were originally defined in an interim specification called Positioning HTML Elements with Cascading Style Sheets which was released between the CSS1 and CSS2 specifications; they have since been incorporated into the CSS2 specification. WebReference CSS Tutorial, WebReview's articles on stylesheets
Which browsers support which CSS features?
Internet Explorer 3, 4, and 5, Navigator 4, and Opera all have partial support for Cascading Style Sheets, level 1. So when using Cascading Style Sheets you need to be conscious of which browsers implement which properties. Here are two reference tables:
- WebReview: http://webreview.com/wr/pub/guides/style/mastergrid.html
- ProjectCool: http://www.projectcool.com/developer/reference/css_style.html
Can I check my CSS markup to find mistakes?
W3C CSS Validator will check your page, inform you of any markup errors and enable you to put a logo on your page if it is CSS-compliant.
A table of CSS properties and values is available at
http://blogs.simplythebest.net/RadianT/6/CSS+Properties.html.
