HTML and CSS Reference
In-Depth Information
to each
H1
element as it occurs within the document, which could prove quite time con-
suming. With style sheets you can create the style once and have that definition apply
to all
H1
elements in the document. If you don't have a lot of time to learn how to create
style sheets, an excellent alternative is Macromedia's Dreamweaver MX. For more on
authoring tools, see
http://www.w3.org/Style/CSS/#editors
.
Style sheets are called cascading because the effects of a style can be inherited or cas-
caded down to other tags. This gets back to the parent/child relationship we have talked
about since Chapter 1, the DOM. If a style has been defined for a parent tag, any tags
defined within that style may inherit that style. Suppose a style has been defined for a
<p>
tag. The text within these tags has been set to blue and the font is set to a sans serif
font. If within the
<p>
tag, another set of tags is embedded, such as
<b>
or
<em>
, then
those tags will inherit the blue color and the “sans serif” font. The style has cascaded
down from the parent to the child. But this is a simplistic definition of cascading. The
rules can be very complex and involve multiple style sheets coming from external
sources as well as internal sources. And even though a browser might support style
sheets, it might render the CSS information differently. For example, the DOCTYPE dec-
laration used at the start of the document might allow a document to be displayed with
nonstandard rendering rules (Quirks mode) or follow the W3C strict standard, and
older browsers may have a limited or a buggy implementation of the CSS standard. For
more on this topic, see
https://developer.mozilla.org/en/Common_CSS_Questions.
The good news is that all modern browsers support CSS.
A CSS-enhanced browser supports CSS and will recognize the style tag
<style>
as a con-
tainer for a style sheet, and based on the definition of the style, will produce the docu-
ment accordingly. Modern browsers, such as Internet Explorer, Mozilla Firefox,
Netscape, Opera, and Safari support CSS, and the majority of Web users are running a
CSS-enhanced browser. However, just because a browser is CSS enhanced doesn't mean
that it is flawless or without limitations. And just because a browser is not CSS
enhanced, doesn't mean that it can't see the content of a page.
1
Traditionally, browsers have silently ignored unknown tags, so if a browser does not
support CSS, when it encounters a
<style>
tag, its content will be treated simply as part
of the document. To hide the
<style>
tag content, one method is to enclose it within
HTML comments as shown here:
<style type="text/css"><!--
p.largetext/* */ { font-size: 200% ; }
--></style>
Example from:
http://www.thesitewizard.com/css/excludecss.shtml
1. For an updated overview of available browsers, see the W3C overview page:
