|
CSS Tip:
Be Careful With Curly Braces
by Tom Dahm,
Chief Operations Officer,
NetMechanic, Inc.
When building an inline style sheet, beware of using the curly braces to enclose your style. This can cause your style to be incompatible with multiple browsers.
Cascading style sheets are powerful new features of HTML 4 that give you much more control over the look of your web pages. Unfortunately browser support for CSS has lagged behind the standards, making it hard to know exactly how the major browsers will handle your styles. If you aren't aware of these issues, you'll encounter serious compatibility problems with your site. The definition of inline style sheets is a good example of this.
You can define a style sheet for your document in one of two ways:
- As a document-wide style contained inside a STYLE tag
- As an element-specific style using the STYLE attribute
For example, if you were defining a style to be used throughout your page, you might define it like this:
<STYLE>
P { color : red }
</STYLE>
<P> This is red text </P>
|
This style would render all paragraphs in your page in red text.
But suppose you wanted to apply this style to just one paragraph in your page. One way to do this is to define an inline style sheet as follows:
<P STYLE="color : red">This is red text</P>
|
Notice that you don't use the curly braces to contain the inline style declaration. Curly braces are used to separate one or more style declarations from the style selector to which they apply (in our example the style selector is the P tag). For an inline style sheet the style is already tied to a single page element, so you don't need a selector or curly braces. In fact, use of curly braces is a violation of the style sheet standards.
However, Microsoft Internet Explorer forgives this error. If you include curly braces in your inline style sheet, MSIE will display the page as you intended. Netscape Navigator applies a strict interpretation of the standards and rejects any inline style that includes the braces. That means Navigator won't display your style at all.
Keep that in mind if you use Internet Explorer as your default browser. You still need to test your page under both major browsers.
|
