(Site Identification)

'Eye' Focus: Web Support Tutorials

(Page Content)

Style Sheets: More Powerful Methods

Remember, any HTML tag can serve as a selector and have Style Sheet declarations attached to it. NOW you want more complex control than that. The repeated title in the following example appears identical without Style Sheet support, but the second one is layered, repositioned, and colored with Style Sheet definitions.

(to Top) HTML header examples:

More Powerful Methods

More Powerful Methods



The HTML code looks like this: (skip code)

<h2 title="This is not an image! It is a header with style sheets applied."><a style="font-size:16px; position:relative; left:70px; top:-20px; z-index:1; color:#cc0000;">More</a> <a style="font-size:35px">Powerful</a> <a style="font-size:16px; position:relative; left:-30px; top:15px; z-index:1; color:#009900">Methods</a></h2>

The part that reads title="This is not an image!" is not required but can be used with any tag. This TITLE is provided as additional information to the user or read to the visitor by screen readers.

(to Top) Classes

Say you want a red body text for the first paragraph, blue for the second one, and purple for the third. You can have it! That's where classes come in.

Create three different classes of <p>, each with a different Style Sheet declaration. The rules (either embedded or in an external Style Sheets file) would look like this: (skip code)
p.first {color:red;}
p.second {color:blue;}
p.third {color:purple;}

The HTML code would look like this: (skip code)
<p class="first">The first paragraph, using class="first".</p>
<p class="second">The second paragraph, using class="second".</p>
<p class="third">The third paragraph, using class="third".</p>

Which gives:

The first paragraph, using class="first".

The second paragraph, using class="second".

The third paragraph, using class="third".


Classes can have any desired name, just be sure to use a period before the class name in the Style Sheets rule.

Classes are not even required to be attached to any HTML tag such as: (skip code)
.glow {color:red; font-weight:bold; background-color:yellow;}

Now use class="glow" with any HTML tag in the page's <body> and the text will be displayed with red on yellow.

(to Top) Contextual Selectors

Let's make all bold text red only if it occurs in regular body text. Impossible? Wrong. Style Sheets can do the impossible. Contextual selectors demand a certain situation be true for the declarations to be in effect. (skip code)

p b {color:red;}

Along with:

<h1><b>'Eye' Focus:</b> Web Support Tutorials</h1>
<p>The <b>wizards</b> of HTML.</p>


Produces the result:

'Eye' Focus: Web Support Tutorials

The wizards of HTML.


This rule tells the browser to make all bold text red only if it appears within a <p> tag. The bold text in the first line isn't red, but the bold text in the second line is. (The example here only informs of the method, it doesn't use it.)

Caution: This does not work on all browsers. Often the first element 'P' will be selected for the definition and the 'B' will be ignored. This also applies when you combine tags as in: (skip code)
p, br, div {color:black;}

Here again, only the paragraph may get the application and the rest will not. Always test your designs with a variety of browsers to be sure that you are getting the results you desire.

(to Top) Comments

Commenting, even in Style Sheets, is a good idea and can be used on any line, like so: (skip code)
p.first {color:green;} /* first paragraph of every page is green */
h1 {text-indent:10px; font-family:cursive,serif;}
img {margin-top:100px;} /* all images have a big top margin */

You should make note that the double slash method is not supported for comments in a style sheet as in:
// This is not a style sheet comment but does work with JavaScript.

(to Top) What's a poor web browser to do?

In one page there may be as many as three different Style Sheet methods, all using <p> as a selector: an imported Style Sheet to display text in red, an embedded Style Sheet specifying the use of blue, and an inline Style Sheet that says use yellow.

Thankfully, browsers supporting Style Sheets have a cascading order of rules instructing them in the order of priority. Some Style Sheet rules are more important than others. According to the official specification of cascading Style Sheets, this is the order of importance:

  1. Inline styles
  2. Embedded styles
  3. Linked styles
  4. Imported styles
  5. Default browser styles

Inline styles override embedded styles, which override linked styles, ...

Unfortunately, Netscape and Microsoft have not been implementing this order in their browsers. Both browsers give more importance to linked styles than embedded styles. For now, it is best to stay with one method of adding styles to avoid Style Sheet rule conflicts.

Even if cascading order worked perfectly, what happens when multiple rules of the same kind conflict? For example, one embedded rule declares <p> text green, and another embedded rule declares it red. There's an order for these conflicts, too, but it's complicated. Simply put, here's what browsers check for: (skip code)
body {color:green;}
p {color:red;}

<p> text is specifically declared red by one rule, but it also inherits green from the <body> rule. (With a <body> declaration the entire page inherits the rule.) However, the specific rule outweighs the inherited value, so red wins out.

If no rule is specifically declared, or if there are multiple rules specifically declared, the browser moves to the next step. It then looks for an inherited rule and uses what it finds. If it finds none, or finds multiple inherited rules, the browser moves to the next step.

When all else fails the browser uses rules in the order in which they appear. In the above example, <p> text would display in red since that was the last rule given.

Note: The official cascading Style Sheet specification goes into great detail on cascading order and it includes other concepts in importance and specifics. Since those are neither supported by Netscape Communicator nor Internet Explorer there is no need to go into them here.

One last instance: What happens when Style Sheet rules collide with HTML tags?

The Style Sheet code reads: (skip code)
i {font-family:impact,serif;}

But the content reads: (skip code)
<p>I think <i><font face="times,serif;">East of Eden</font></i> is Steinbeck's best novel.</p>

The Style Sheet rule tells the browser to use impact, but the familiar HTML <font face="times,serif;"> tag demands another type. An obvious conflict, but according to the official Style Sheets specification, the Style Sheet should win out. Only if there are no applicable CSS rules should the browser use the HTML tag instead. Unfortunately, the major browsers treat HTML tags as more important than Style Sheets rules. Sigh...

(to Top) The End Result

Cascading Style Sheets are great, web browsers not so much so.

Internet Explorer 3.0 was the first browser to attempt to support Style Sheets when the official specification had yet to be defined. By the time the next versions of Microsoft's Internet Explorer and Netscape's Communicator came out you would think that Style Sheet support would be perfected. Sorry! They use their own interpretations of some of the CSS properties, and don't support other properties at all.

Result of using a Style Sheet - Moderately Reliable. Most things work, but some do not. Even when things seem to work fine, you find they appear differently with various browsers or computer platforms.

(to Top) Further Work with CSS

For more work on Style Sheet development, have a look at our project on:
Developing a 'Core Cascading Style Sheet'.

With this project we attempt to define all of the rendering, printing, and aural elements of a Style Sheet in a maner that is compatible with any browser. The goal is to find the definitions that work with all browsers without attempting to exploit flaws and bugs to reach one's goal.

Previous Page of Tutorial Main Page of Tutorial Next Page of Tutorial


[Updated: Sunday, November 18, 2007]