CSS

Advantages



* Useful for small quantities of style definitions

* Can override other style specification methods at the local level so only exceptions need to be listed in conjunction with other style methods 



Disadvantages



* Does not distance style information from content (a main goal of SGML/HTML)

* Can not control styles for multiple documents at once

* Author can not create or control classes of elements to control multiple element types within the document

* Selector grouping methods can not be used to create complex element addressing scenarios

It depends on your definition of "support." If you are interested in those browsers which makes some attempt at supporting CSS, no matter how partial or bug-ridden, then the list is:



* Internet Explorer 3.0 and above

* Navigator 4.0 and above

* Opera 3.6 and above

* Konqueror

* Arena

* Emacs-w3

* Amaya

* Lexicon

* XPublish by Media Design in?Progress



If instead you're interested in those browsers which are known to do a credible job of bug-free and mostly completel support for CSS1, then the list narrows somewhat dramatically:



* Internet Explorer 5.0 for Macintosh and above

* Internet Exporer 5.5 for Windows and above

* Netscape Navigator 6.0 and above

* Opera 4.0 and above



While none of these browser can be claimed to have a perfect implementation of CSS1, they are all quite good and can be relied upon to operate in a consistent fashion for most of CSS1.

Ultimately, if you don't care about having well-written and valid HTML, there is no point. But here are some of the reasons I use both:



IDs are more specific than classes

IDs act as anchors for links

IDs provide structure to my code

When I first started writing CSS I didn't use many IDs, but as I grew into it, I started understanding why I might want to use them and found them more valuable. They aren't a critical portion of CSS, and if you choose to leave them out at first, that's fine. But they do serve a purpose, and eventually you will probably come across a situation where they would help you.

The first thing you should realize is that the id attribute is used for more than just styles. You can use it as an anchor for links to point to as well as uniquely identifying parts of the page for future reference.



But if all you're using the id attribute for is to add styles to one specific element, it might seem to make sense to just add those styles inline rather than bothering with a style sheet. But there are some good reasons to still use external (or internal) style sheets.



IDs Can be Re-Used Across Pages



If you have a standard layout across multiple pages, you might use the id attribute to define certain areas of your page and give them styles with that. If you use inline styles then every time you change the layout, you have to change every page with those styles. If you use an external style sheet, you just need to change it in one place.



IDs Take Up Less Space than Inline Styles



You can have an id that is only one character long. This would add 6 characters to your HTML (e.g. id="a"). But if you tried to add even the simple color to your HTML as an inline style you're adding 11 characters to the HTML. And most styles, especially on ID'd items, are much longer than color: red;. So a page that is marked up with id attributes will load more quickly than one marked up with inline styles.

While you can use an external style sheet to define the styles for every page on your site, you can't place content in that style sheet to be displayed on every page. CSS is not intended for content, but only for the styles or look-and-feel of your site.



Server Side Includes Can Do the Job



While you can't do it with CSS, there are other tools that you can use to write your website content once and use it in multiple locations. The oldest method is Server Side Includes (SSI) or SHTML. When you use SSI, you write the repeating content in a separate file and then call that file from within your HTML with an SSI directive. But this will only work if your server supports SSI.



Other Includes



If you don't have SSI or just don't want to use it, you can use other methods to include one HTML file in another. Tools like PHP or ColdFusion or ASP or even JavaScript. It's also possible to use a content management system (CMS).

CSS is written with US English spellings. So if you are writing colour:red; in your style sheets, none of your text will change color.



Make sure that when you write CSS color styles you use the US English spelling for them:



color

 background-color

 border-color

 outline-color

These two style properties do two different things.



visibility: hidden hides the element, but it still takes up space in the layout.



display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.



You can see the effect of these style properties on this page. I created three identical swatches of code, and then set the display and visibility properties on two so you can see how they look.

Indenting paragraphs can be done in several ways.



Cascading Style Sheets



Using CSS, you can set all your paragraphs in a document to be indented whatever amount you would wish.



 <style>

 <!--

 p { text-indent : 10px; }

 -->

 </style> 

This is the best way to indent paragraphs, as it separates style from content and is widely supported on modern browsers.



Non-Breaking Space



The non-breaking space special character can be used to move text and images over slightly on a Web page.



 <p>

 & nbsp; & nbsp; & nbsp; & nbsp; Paragraph starts here....

 </p> 

Remove the spaces between the ampersand and the "nbsp;".



Some browsers don't like multiple non-breaking spaces in a row. They will crash, or just ignore them.



Transparent Image



Use a transparent GIF image, no more than 5-10 pixels wide and 2-5 pixels high. Place that image at the beginning of each of your paragraphs.



 <p>

 <img src="spacer.gif" width="1" height="1" border="0" style="margin: 0 5px 0 5px;" alt=" " />Paragraph starts here....

 </p> 

Using this method can make your pages load more slowly, and look strange if the image doesn't load for some reason.

If the user agent viewing your Web page does not have access to the font you have chosen, it will use a different font instead. If you indicate which generic font family you'd like the user agent to use, you can have a little more control over your Web page.



The generic fonts are:



cursive

fantasy

monospace

sans-serif

serif

You can change the font on your page using CSS. You can change many aspects of the type on your Web pages, including the font size, family, and color. Find out more.



Using CSS, you will have control over additional font attributes like the boldness, variations on the font, and the style of font. Learn more about the font property.