This chapter looks at each of the different ways you can defines styles, and shows how to apply styles to HTML elements.
A style sheet is a series of one or more style definitions.You can define a style sheet directly inside the document that uses it, or you can define a style sheet in an external document. If the style sheet is in an external document, then it can be used by other documents. For example, a series of pages for a particular site could all use a single externally defined style sheet that sets up the house style.
If the style sheet is unlikely to be applicable to other documents, it can be more convenient to define it directly in the document that uses it, since then you have the style sheet and the content in one place.
To define a style sheet directly inside a document, use the <STYLE> tag in the header part of your document. The <STYLE> tag opens the style sheet, and the </STYLE> tag closes the style sheet. Be sure to use the <STYLE> tag before the <BODY> tag.
When you use the <STYLE> tag, you can specify the TYPE attribute to indicate if the type is "text/css" or "text/javascript". The default value for TYPE is "text/css".
The following example defines a style sheet that specifies that all level-one headings are uppercase blue, and all blockquotes are red italic.
<HEAD>
<STYLE TYPE="text/css">
H1 {color: blue; text-transform: uppercase;}
BLOCKQUOTE {color: red; font-style: italic;}
</STYLE>
</HEAD>
<BODY>
<HEAD>
<STYLE TYPE="text/javascript">
tags.H1.textTransform = "uppercase";
tags.H1.color = "blue";
tags.BLOCKQUOTE.color = "red";
tags.BLOCKQUOTE.font-style: italic;
</STYLE>
</HEAD>
<BODY>
<H1>This Heading Is Blue</H1>
<B>BLOCKQUOTE>This blockquote is displayed in red.</B>
This example works in Netscape Navigator 4.0+. Example results:
This blockquote is displayed in red.
You can define style sheets in a file that is separate from the document and then link the style sheet to the document. The benefit of this approach is that the style sheet can be used by any HTML document. You could think of an externally defined style sheet as a style template that can be applied to any document. For example, you could apply a style template to all pages served from a particular web site by including a link to the style sheet file in each page.
The syntax for defining styles in external files is the same as for defining styles inside a document file, except that you do not need the opening and closing <STYLE> and </STYLE> tags. Here is an example:
/* external style sheet mystyles1.htm */
all.BOLDBLUE {color:blue; font-weight: bold;}
H1 {line-height: 18pt;}
P {color: yellow;}
/* end of file */
/* external style sheet mystyles1.htm */
classes.BOLDBLUE.all.color = "blue";
classes.BOLDBLUE.all.fontWeight = "bold";
tags.H1.lineHeight="18pt";
tags.P.color="yellow";
/* end of file */
To use an externally defined style sheet in a document, use the <LINK> tag to link to the style sheet, as in this example:
<HTML>
<HEAD>
<TITLE>A Good Title</TITLE>
<LINK REL=STYLESHEET TYPE="text/css"
HREF="http://style.com/mystyles1.htm">
</HEAD>
<HTML>
<HEAD>
<TITLE>A Good Title</TITLE>
<LINK REL=STYLESHEET TYPE="text/javascript"
HREF="http://style.com/mystyles1.htm">
If a document includes or links to a style sheet, all the styles defined in the style sheet can be used by the document. If the style sheet specifies the style of any HTML elements, then all the HTML elements of that kind in the document will use the specified style.
There may be times when you want to selectively apply a style to HTML elements. For example, you may want some of the paragraphs (<P> elements) in a document to be red, and others to be blue. In this situation, defining a style that applies to all <P> elements is not the right thing to do. Instead, you can define classes of style, and apply the appropriate class of style to each element that needs to use a style.
To apply a style class to an HTML element, define the style class in the style sheet, and then use the CLASS attribute in the HTML element.
The following examples show how to define a class called GREENBOLD, whose color is a medium shade of green and whose font weight is bold. The example then illustrates how to use the style in HTML text.
<STYLE TYPE="text/css">
all.GREENBOLD {color:#44CC22; font-weight:bold;}
</STYLE>
<STYLE TYPE="text/javascript">
classes.GREENBOLD.all.color = "#44CC22"
classes.GREENBOLD.all.fontWeight = "bold"
</STYLE>
<H1 CLASS=GREENBOLD>This Heading Is Very Green</H1>
<P CLASS = GREENBOLD>This paragraph uses the style class GREENBOLD. You can use the CLASS attribute to specify the style class to be used by an HTML element.</P>
<BLOCKQUOTE CLASS = GREENBOLD>
This blockquote uses the style class GREENBOLD. As a consequence, it is both green and bold. It can be useful to use styles to make blockquotes stand out from the rest of the page.
</BLOCKQUOTE>
This example works in Netscape Navigator 4.0+. Example results:
This paragraph uses the style class GREENBOLD. You can use the CLASS attribute to specify the style class to be used by an HTML element.
This blockquote uses the style class GREENBOLD. As a consequence, it is both green and bold. It can be useful to use styles to make blockquoutes stand out from the rest of the page.
In JavaScript syntax, you cannot use hyphens inside class names. A hyphen is actually a minus sign, which is a JavaScript operator. Class names In JavaScript syntax cannot include any JavaScript operators, including but not limited to -, +, *, /, and %.
When defining a style class, you can specify which HTML elements can use this style, or you can use the keyword all to let all elements use it.
For example, the following code creates a style class DARKYELLOW, which can be used by any HTML element. The code also creates a class called RED1, which can be used only by <P> and <BLOCKQUOTE> elements.
<STYLE type="text/css">
all.DARKYELLOW {color:#EECC00;}
P.RED1 {color: red; font-weight:bold;}
BLOCKQUOTE.red1 {color:red; font-weight:bold;}
</STYLE>
<STYLE type="text/javascript">
classes.DARKYELLOW.all.color="#EECC00";
classes.RED1.P.color = "red";
classes.RED1.P.fontWeight = "bold";
classes.RED1.BLOCKQUOTE.color = "red";
classes.RED1.BLOCKQUOTE.fontWeight = "bold";
</STYLE>
<BODY>
<P CLASS=red1>This paragraph is red.</H1>
<P>This paragraph is in the default color, since it does not use the class RED1.</P>
<BLOCKQUOTE CLASS="red1">This blockquote uses the class RED1.
</BLOCKQUOTE>
<H5 CLASS=red1>This H5 element tried to use the style RED1, but was not allowed to use it.</H5>
<P CLASS=darkyellowclass>This paragraph is dark yellow.
<H5 CLASS=darkyellowclass>This H5 element tried to use the style DARKYELLOW and was succesful.</H5>
This example works in Netscape Navigator 4.0+. Example results:
This paragraph is red.
This paragraph is in the default color, since it does not use the class RED1.
This blockquote uses the class RED1.
This paragraph is dark yellow.
An HTML element can use only one class of style. If you specify two or more classes of style for an HTML element, the first one specified is used. For example, in the following code the paragraph will use the RED1 style and ignore the DARKYELLOW style:
<P CLASS="RED1" CLASS="DARKYELLOW">Another paragraph.</P>
You can create individual named styles. An HTML element can use both a class of style and a named individual style. Thus you can use individual named styles to express stylistic exceptions to a class of style. For example, if a paragraph uses the MAIN style class, it could also use the named style BLUE1 which could express some differences to the MAIN style.
Individual names styles are also useful for defining layers of precisely positioned HTML content. For more details of layers, see the Part 2. Positioning HTML Content.
To define named styles in CSS syntax, precede the name of the style with the # sign. In JavaScript syntax, use the ids property.
To apply the style to an element, specify the style name as the value of the element's ID attribute.
The following codes defines a style class called MAIN. This style class specifies a a line height of 20 points, a font size of 18 points; a font weight of bold, and a color of red. The code also defines a named style BLUE1 whose color is blue.
<STYLE TYPE="text/css">
all.STYLE1 {line-height: 20pt; font-size: 18pt;
font-weight: bold; color: red;}
#BLUE1 {color: blue;}
</STYLE>
<STYLE TYPE="text/javascript">
with (classes.STYLE1.all) {
lineHeight = "20pt";
fontSize = "18pt";
fontWeight = "bold";
all.color = "red";
}
ids.BLUE1.color = "blue";
</STYLE>
<P CLASS="STYLE1">Here you see some tall red text. The text in this paragraph is much taller, bolder, and bigger than paragraph text normally is.</P>
<P CLASS="STYLE1" ID="BLUE1">This paragraph has tall, bold, blue text. Although this paragraph is in class STYLE1 1, whose members are normally red, it also has a unique ID that allows it to be blue.</P>
This example works in Netscape Navigator 4.0+. Example results:
Here you see some tall red text. The text in this paragraph is much taller, bolder, and bigger than paragraph text normally is.
This paragraph has tall, bold, blue text. Although this paragraph is in class STYLE1 1, whose members are normally red, it also has a unique ID that allows it to be blue.
You can define the style to be used by all HTML elements of a particular kind. If you need more control over when a style is used, you can define a style class that you can selectively apply to any element. Sometimes however, even that level of control is not enough. You might, for example, want to specify a green color for all <EM> elements inside level-one headings.
You can achieve this level of control over the application of styles by using contextual selection criteria in your style definition. Contextual selection criteria allow you to specify criteria such as "this style applies to this kind of element nested inside that kind of element nested inside the other kind of element."
To specify contextual selection criteria in CSS syntax, list the HTML elements in order before the opening curly brace of the properties list. In JavaScript syntax, use the predefined method contextual().
The following example shows how to specify a green text color for all <EM> elements inside <H1> elements.
<STYLE TYPE="text/css">
H1 EM {color:green;}
</STYLE>
<STYLE TYPE="text/javascript">
contextual(tags.H1, tags.EM).color = "green";
</STYLE>
<H1>This is<EM> green, emphasized text,</EM> but this is plain heading- one text</H1>
This example works in Netscape Navigator 4.0+. Example results:
Consider another example, given first in CSS syntax then in JavaScript syntax:.
UL UL LI {color:blue;}
contextual(tags.UL, tags.UL, tags.LI).color = "blue";
In this case, the selection criteria match <LI> elements with at least two <UL> parents. That is, only list items that are two levels deep in an unordered list will match this contextual selection and thus be displayed in blue.
You can use contextual selection criteria to look for tags, classes, IDs, or combinations of these. For example, the following example creates a class called MAGENTACLASS. Everything in this class is magenta colored. All paragraphs in MAGENTACLASS that are also inside <DIV> elements are italic. All text inside <B> tags nested inside paragraphs in MAGENTACLASS that are inside <DIV> elements is extra large.
<STYLE TYPE="text/css">
all.MAGENTACLASS {color: magenta;}
DIV P.MAGENTACLASS {font-style: italic;}
DIV P.MAGENTACLASS B {font-size:18pt;}
</STYLE>
<STYLE TYPE="text/javascript">
classes.MAGENTACLASS.all.color = "magenta";
contextual(tags.DIV, classes.MAGENTACLASS.P).fontStyle = "italic";
contextual(tags.DIV, classes.MAGENTACLASS.P, tags.B).fontSize = "18pt";
</STYLE>
<DIV CLASS=MAGENTACLASS>
<H3>Heading 3 in the MAGENTACLASS</H3>
<P>Is this paragraph magenta and italic? It should be. Here comes some <B>big bold text.</B> We achieved this result with contextual selection.</P>
<P>This paragraph should be magenta too.</P>
</DIV>
<P>This paragraph is still magenta colored, but since it is not inside a DIV block, it should not be italic.</P>
This example works in Netscape Navigator 4.0+. Example results:
Is this paragraph magenta and italic? It should be. Here comes some big bold text. We achieved this result with contextual selection.
This paragraph should be magenta too.
This paragraph is still magenta colored, but since it is not inside a DIV block, it should not be italic.
As well as defining styles in style sheets, you can also use the STYLE attribute of an HTML tag to define a style for use by that individual tag, and that tag only. This approach basically defines the style on the fly, and can be useful in situations where you want an element to use a style in a unique situation, where you do not need to reuse the style elsewhere in the document.
In general though, it is better to define all the style used by a document in a single place (be it at the top of the document or in a separate style sheet file) so that you know where to make changes to the style. If a style is defined in a style sheet, any element in the document can use that style. If you want to change the properties of the style, you need to make the change only once and it is automatically applied to all elements that use that style.
Sometimes, however, youmay want to specify the style of an individual element, and an easy way to do this is to use the STYLE attribute. The following example specifies the style of an individual <P> element. It also shows how to use the STYLE attribute with the <SPAN> tag to apply a style to a piece of arbitrary content.
<P STYLE="color:green; font-weight:bold;
margin-right:20%; margin-left:20%;
border-width:2pt; border-color:blue;">
This paragraph, and only this paragraph is bold green with big margins and a blue border.</P>
<P>This paragraph is in the usual color, whatever that may be, but this
<SPAN STYLE="color:red; font-style:italic;">word </span> is different from the other words in this paragraph.</P>
<P STYLE="color = 'green'; fontWeight='bold';
marginRight='20%' marginLeft='20%';
borderWidth='2pt'; borderColor='blue;">
This paragraph, and only this paragraph is bold green with big margins and a blue border.</P>
<P>This paragraph is in the usual color, whatever that may be, but this <SPAN STYLE="color='red'; fontStyle='italic'">word </span> is different from the other words in this paragraph.</P>
This example works in Netscape Navigator 4.0+. Example results:
This paragraph, and only this paragraph is bold green with big margins and a blue border.
This paragraph is the usual color, whatever that may be, but this word is different from the other words in this paragraph.
You can use more than one style sheet to set the styles for a document. You might want to do this when you have several partial styles sheets that you wish to mix and match, or perhaps where your document falls into several different categories, each with its own style sheet.
For example, suppose you are are writing a white paper about the benefits of a network product from a company called Networks Unlimited. You might need to use three style sheet: one defining the company's usual style for white papers, another defining their usual style for documents about networking products, and yet another defining the corporate style for Networks Unlimited.
The following example illustrates the use of several style sheets in one document:
<STYLE TYPE="text/css"
SRC="http://www.networksunlimited.org/styles/corporate"></STYLE>
<STYLE TYPE="text/css"
SRC="styles/whitepaper"></STYLE>
<STYLE TYPE="text/javascript"
SRC="styles/networkthings"></STYLE>
<STYLE TYPE="text/css">
H1 {color: red;} /* override external sheets */
</STYLE>
For externally linked style sheets, the last one listed takes precedence over previously listed style sheets. So in this case, if networkthings and whitepaper specify conflicting styles, then the styles defined in networkthings take precedence over styles defined in whitepaper.
Locally defined styles take precedence over styles defined in the <STYLE> element and over styles defined in external style sheets. In general, local style values override values inherited from parent elements, and more specific style values override more general values, as illustrated in the following example.
<STYLE TYPE="text/css">
P {color:blue;}
B {color:green;}
</STYLE>
<STYLE TYPE="text/javascript">
tags.P.color="blue";
tags.B.color="green";
</STYLE>
<P>This is a blue paragraph, as determined by the style sheet. But these <B>bold words are green,</B> as you see.</P>
<P STYLE="color:red">This is a red paragraph, as determined by the local style. However, these <B>bold words are still green,</B> since the style defined directly for bold elements overrides the style of the parent element.</P>
This example works in Netscape Navigator 4.0+. Example results:
This is a blue paragraph, as determined by the style sheet. But these bold words are green, as you see.
This is a red paragraph, as determined by the local style. However, these bold words are still green, since the style defined directly for bold elements overrides the style of the parent element.
Last Updated: 08/07/97 15:21:45