Cascading Style Sheets can put a great deal of control and flexibility into the hands of a Web designer–in theory. In reality, however, varying browser support for CSS1 and lack of CSS2 implementation makes CSS a very tricky topic.

Cascading Style Sheets: The Definitive Guide is a comprehensive text that shows how to take advantage of the benefits of CSS while keeping compatibility issues in mind.
The book is very upfront about the spotty early browser support for CSS1 and the sluggish adoption of CSS2. However, enthusiasm for the technology spills out of the pages, making a strong case for even the most skeptical reader to give CSS a whirl and count on its future. The text covers CSS1 in impressive depth–not only the syntactical conventions but also more general concepts such as specificity and inheritance. Frequent warnings and tips alert the reader to browser-compatibility pitfalls.

Entire chapters are devoted to topics like units and values, visual formatting and positioning, and the usual text, fonts, and colors. This attention to both detail and architecture helps readers build a well-rounded knowledge of  CSS and equips readers for a future of real-world debugging. Cascading Style Sheets honestly explains the reasons for avoiding an in-depth discussion of the still immature CSS2, but covers the general changes over CSS1 in a brief chapter near the end of the book.

When successfully implemented, Cascading Style Sheets result in much more elegant HTML that separates form from function. This fine guide delivers on its promise as an indispensable tool for Website Design CSS coders.

Topics covered:

HTML with CSS
Selectors and structure
Units
Text manipulation
Colors and backgrounds
Boxes and borders
Visual formatting principles
Positioning
CSS2 preview
CSS case studies

Never leave an
HTML
error on your web page. Open and check your
website in different web browsers. Make sure
things are aligned well, there is no font
missing and colors are visible.

If your site has
HTML
errors, the
Search engine spider might not be
able to crawl properly. Also the usability
of your site will decrease. So it’s better
to keep a check on the code. Make it error
free.

Top 3
Reasons your code should be error free:

1. Search engine spiders won’t be
   able to
   crawl your site easily. They
   calculate page download time. So you
   might receive a lower  SEO score.
2. Browsers behave very different for
   single
   code. Check code for IE and a
   Firefox user might receive an error or
   might not be able to view the page at
   all. This can result into higher bounce
   rates.
3. You will get negative points, if you
   have
   broken links in your site. Also
   if the links lead to pages that does not
   exist at all.

Tip:
How to find broken links in your blog or
website

The best way
to check that your code is correct:

Make sure that your website or blog complies
to World
Wide Web Consortium (W3C)
standards and guidelines. W3C is the
organization which sets standards for
various internet technologies like HTML CSS
and others

To check a
page you can use

HTML Validator service

If you use
your own feed use

feed validation service

Also don’t
forget to check your CSS with

CSS validator

Code:

#selector {

opacity:0.7;                    /* Modern Browsers */

filter:alpha(opacity=70); /* IE 5.5, IE6 & IE7 */

}

With these two CSS directives, you’re hitting IE5.5, IE6, IE7 and “modern browsers” (i.e., current versions of Safari, Opera, Firefox and Netscape). Together, these account for roughly 97% of our visitors. That’s generally what we shoot for – the “majority”. (The way I see it, you can kill yourself, trying to get the last 3% or so, or make get the big percentage without a lot of fuss.)
The reason I say this this is “future-proof” is that IE6 and IE7 will never understand the “opacity” rule and who knows about IE8? But it doesn’t matter, IE8 will either continue to understand the filter directive or understand the “opacity” rule … either way, you’re covered.
If you really want to hit a few more browsers (and don’t care about CSS validation), you can also add these additional directives:
Code:

#selector {

-moz-opacity:0.7;      /* older Mozilla browsers, older versions of Netscape */

-khtml-opacity:0.7;    /* old versions of Safari (1.x) */

}

1. What are Cascading Style Sheets?
2. Why do style sheets exist?
3. Why use style sheets?
4. Who defines the CSS standard? Is it one person? A
   company?
5. What can be done with style sheets that can not be
   accomplished with regular HTML?
6. Is there anything that CAN’T be replaced by
   style sheets?
7. How do I design for backward compatibility using style
   sheets?
8. What browsers support style sheets? To what extent?
9. Do any WYSIWYG editors support creation of CSS? Any text
   editors?
10. Can you use someone’s style sheet without permission?
11. What does the “Cascading” in “Cascading Style Sheets”
    mean?
12. Which style specification method should be used? Why?
13. What are the advantages and disadvantages of the
    various style specification methods?
14. As a reader, how can I make my browser recognize my
    own style sheet?
15. How do you override the underlining of hyperlinks?

1. What are Cascading Style Sheets?

A Cascading Style Sheet (CSS) is a list of statements (also known as
rules) that can assign various rendering properties to HTML elements. Style
rules can be specified for a single element occurrence, multiple elements,
an entire document, or even multiple documents at once. It is possible to
specify many different rules for an element in different locations using
different methods. All these rules are collected and merged (known as a
“cascading” of styles) when the document is rendered to form a single style
rule for each element.

2. Why do style sheets exist?

SGML (of which HTML is a derivative) was meant to be a
device-independent method for conveying a document’s structural and semantic
content (its meaning.) It was never meant to convey physical formatting
information. HTML has crossed this line and now contains many elements and
attributes which specify visual style and formatting information. One of the
main reasons for style sheets is to stop the creation of new HTML physical
formatting constructs and once again separate style information from
document content.

3. Why use Style Sheets?

Style sheets allow a much greater degree of layout and display control
than has ever been possible thus far in HTML. The amount of format coding
necessary to control display characteristics can be greatly reduced through
the use of external style sheets which can be used by a group of documents.
Also, multiple style sheets can be integrated from different sources to form
a cohesive tapestry of styles for a document. Style sheets are also backward
compatible – They can be mixed with HTML styling elements and attributes so
that older browsers can view content as intended.

4. Who defines the CSS standard? Is it one
person? A company?

The W3C (the organization in charge of
defining the HTML standards) creates and develops the CSS specifications
with public input from the W3C
www-style mailing
list discussion forum and feedback from the member companies that comprise
the W3C Consortium
(which include companies such as Apple, Microsoft, and Netscape along with
over 150 others.)

The “Cascading Style Sheets
Level 1” recommendation is edited and maintained by
Håkon Lie and
Bert Bos of the W3C. The
CSS2 recommendation is is
edited and maintained by Håkon Lie, Bert Bos,
Chris Lilley and Ian Jacobs.

5. What can be done with style sheets that can
not be accomplished with regular HTML?

Many of the recent extensions to HTML have been tentative and somewhat
crude attempts to control document layout. Style sheets go several steps
beyond, and introduces complex border, margin and spacing control to most
HTML elements. It also extends the capabilities introduced by most of the
existing HTML browser extensions. Background colors or images can now be
assigned to ANY HTML element instead of just the BODY element and
borders can now be applied to any element instead of just to tables.

6. Is there anything that CAN’T be
replaced by Style Sheets?

Quite a bit actually. Style sheets only specify information that
controls display and rendering information. Virtual style elements that
convey the NATURE of the content can not be replaced by style sheets, and
hyperlinking and multimedia object insertion is not a part of style sheet
functionality at all (although controlling how those objects appear IS
part of style sheets functionality.) The CSS1 specification has gone out of
its way to absorb ALL of the HTML functionality used in controlling
display and layout characteristics.

Rule of Thumb: if an HTML element or attribute gives
cues as to how its contents should be displayed, then some or all of its
functionality has been absorbed by style sheets.

7. How do I design for backward compatibility
using Style Sheets?

Existing HTML style methods (such as <font
SIZE> and <b>) may be
easily combined with style sheet specification methods. Browsers that do not
understand style sheets will use the older HTML formatting methods, and
style sheets specifications can control the appearance of these elements in
browsers that support CSS1.

8. What browsers support style sheets? To what
extent?

Microsoft’s Internet Explorer version 3.0 Beta 2 and above supports CSS,
as does Netscape Communicator 4.0 Beta 2 and above and Opera 3.5 and above.
Take note that the early implementations in these browsers did not support
ALL of the properties and syntax described in the full CSS1
specification and beyond. Later versions have been getting much closer to
full CSS1 compliance, but then comes the next hurdle – CSS2…it was such a
big leap over CSS1 that it has taken the browsers years to come close to
supporting a majority of CSS2’s features. Mozilla and Opera’s current
versions both offer excellent CSS standards compliance. The Macintosh
version of Internet Explorer is said to be very impressive in its CSS
capabilities as well, but PC IE lags behind these implementations. Quite a
few other implementations of CSS now exist in browsers that are not as
widely-used (such as Amaya, Arena and Emacs-W3), but coverage of features in
these documents currently only covers Internet Explorer, NCSA Mosaic,
Netscape and Opera browsers.

9. Do any WYSIWYG editors support the creation
of Style Sheets? Any text-based HTML editors?

As support for CSS in browsers has matured in the last year, both
WYSIWYG and Text-based HTML editors have appeared that allow the creation or
the assistance of creating Cascading Style Sheet syntax. There are now at
least two dozen editors supporting CSS syntax in some form. The W3C
maintains an up-to-date list
of these WYSIWYG and text-based editors.

10. Can you use someone else’s Style Sheet
without permission?

This is a somewhat fuzzy issue. As with HTML tags, style sheet
information is given using a special language syntax. Use of the language is
not copyrighted, and the syntax itself does not convey any content – only
rendering information.

It is not a great idea to reference an external style sheet on someone
else’s server. Doing this is like referencing an in-line image from someone
else’s server in your HTML document. This can end up overloading a server if
too many pages all over the net reference the same item. It can’t hurt to
contact the author of a style sheet, if known, to discuss using the style
sheet, but this may not be possible. In any case, a local copy should be
created and used instead of referencing a remote copy.

11. What does the “Cascading” in “Cascading
Style Sheets” mean?

Style Sheets allow style information to be specified from many
locations. Multiple (partial) external style sheets can be referenced to
reduce redundancy, and both authors as well as readers can specify style
preferences. In addition, three main methods can be employed by an author to
add style information to HTML documents, and multiple approaches for style
control are available in each of these methods. In the end, style can be
specified for a single element using any, or all, of these methods. What
style is to be used when there is a direct conflict between style
specifications for an element?

Cascading comes to the rescue. A document can have styles specified using
all of these methods, but all the information will be reduced to a single,
cohesive “virtual” Style Sheet. Conflict resolution is based on each style
rule having an assigned weight according to its importance in the scheme of
things. A rule with a higher overall importance will carry a higher weight.
This will be used in place of a competing style rule with a lower
weight/importance. A hierarchy of competing styles is thus formed creating a
“cascade” of styles according to their assigned weights. The algorithm used
to determine this cascading weight scale is fairly complex.

For more information, see the section on cascading in the
CSS1 Specification

12. Which style specification method should be
used? Why?

The answer to this one is tricky. The short answer is: “it depends.” The
long answer is, however, another story.

If you are planning on using more than one style specification method in
your document, you must also worry about Cascading Order of Style methods
(see question 11.) If you are going to use only one
method, then some guidelines about the nature of each method need to be kept
in mind. The answer to this question is also very much related to the
advantages and disadvantages to using each of them (next
question.)

Method 1: External Style Sheets (The
LINK
[-->Index DOT Html] element)

This method should be used if you want to apply the same style to
multiple documents. Each document can reference the stand-alone style sheet
and use the styles contained within. Using this method, the appearance of
many documents can be controlled using a single or small number of style
sheets. This can save a LOT of time for an author.

Method 2: Embedded Style Sheets (The
Style
[-->Index DOT Html] element)

The syntax used with Method 2 is the same as that for Method 1. This
method is a happy medium between External Style Sheets and Inline Styles
(see below.). It should be used in place of Method 1 if you only want to
specify styles for a single document. This method should also be used when
you want to specify a style for multiple tag types at once or the list of
style definitions is of larger size.

Method 3: Inline Styles (STYLE attribute to HTML
elements)

If you only have to apply style to one or a few elements in a single
document, your best bet will often be an Inline Style. This method attaches
a style definition within the HTML element it is modifying.

13. What are the advantages/disadvantages of the
various style methods?

Each method of specifying style information has something going for it
(else it would not exist), but each method also has drawbacks as well. This
question is very closely related to the previous question.
These factors should be considered when planning your use of Style Sheets.

External Style Sheets

Advantages

• Can control styles for multiple documents at once
• Classes can be created for use on multiple HTML element types in
  many documents
• Selector and grouping methods can be used to apply styles under
  complex contexts

Disadvantages

• An extra download is required to import style information for each
  document
• The rendering of the document may be delayed until the external
  style sheet is loaded
• Becomes slightly unwieldy for small quantities of style definitions

Embedded Style Sheets

Advantages

• Classes can be created for use on multiple tag types in the document
• Selector and grouping methods can be used to apply styles under
  complex contexts
• No additional downloads necessary to receive style information

Disadvantages

• This method can not control styles for multiple documents at once

Inline Styles

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

14. As a reader, how can I make my browser
recognize my own style sheet?

Netscape

It is not possible to do this in Netscape yet (as of version 4.0.)

Internet Explorer 3.0 (Win95/NT)

[It is possible to do this at least in Windows95/NT, but no user
interface is provided. Unknown how this might be accomplished on other
operating systems.]

1. Open the Registry editor (Start..Run..regedit..ENTER)
2. Under the
   ‘HKEY_LOCAL_MACHINE\Software\Microsoft\InternetExplorer\Styles’ key,
   Edit..New..String Value
3. The new value should be called ‘StyleSheet Pathname’
4. For the value, type in the full directory path of your .css style
   sheet.

Internet Explorer 4.0 (Win95/NT)

1. Under the View menu, select ‘Internet Options’.
2. Under the ‘General’ tab, choose the ‘Accessibility’ button.
3. Choose the ‘Format documents using my style sheet’ check box and
   ‘Browse…’ to the location of your .css style sheet.

15. How do you override the underlining of
hyperlinks?

CSS has the ability to explicitly control the status of underlining for
an element – even for hyperlinks. The correct way to do this in an external
or document-level style sheet is:

A { text-decoration:
none }

and within an anchor element as:

<a HREF=”example.htm”
STYLE=”text-decoration:
none”>link text</a>

Note: The underlining of hyperlinks is a long-standing
visual convention that assists in the visual identification of active
hyperlink areas. Many users expect to see hyperlinks underlined and
may be confused and/or irritated if they are not used. User-defined style
sheets address this user need by allowing the user to have final control
over this feature. Unfortunately, wide support for this ability does not yet
exist.