| Previous | Table of Contents | Next |
In this lesson, you learn how to apply styles to your HTML documents with greater precision using more elaborate selectors.
In the previous lessons, you created styles and applied them to the familiar HTML tags that you use in every document. If you want to apply different styles to several blocks of paragraph text, the simple selectors you have used would not accomplish the task.
You can, however, apply style definitions to more specific parts of your documents. This is referred to in the CSS1 standard as increasing the granularity of your style definitions and you can do this without adding additional HTML tags.
Granularity Granularity is the degree to which like elements in an HTML document have had individual styles applied to them through the use of distinguishing selectors.
To uniquely identify particular document elements that are bounded by the same HTML tags as other elements, you can apply different CLASS attributes to each one. Thus, if you have a document with several text blocks contained within <P> tags, you would modify the opening <P> tags to include the CLASS attribute and a variable to be used as an identifier for that paragraph, in the form <P CLASS=variable>.
Class A class is simply a label, independent of any particular HTML tag, that is used to identify HTML elements to which a certain style will be applied.
Once you are able to identify specific paragraphs by their class, you can create style definitions for the individual classes. To illustrate this, modify your SAMPLE.HTML file from the previous lesson to appear as shown:
<HTML>
<HEAD>
<TITLE>10-Minute Guide to HTML Style Sheets</TITLE>
<STYLE>
<!--
H1 {font-size: 18pt; color: red; text-align: center}
H2 {font-size: 16pt; font-style: italic; color: blue}
BODY {font-family: "Arial"; background: yellow}
->
</STYLE>
</HEAD>
<BODY>
<H1>Lesson 1</H1>
<P CLASS=left> A style is simply a collection of text and
layout attributes that can be selectively applied to all
or part of a document. The idea of grouping them into a
style allows the author to easily apply the same
collection of attributes to many different parts of a
document.</P>
<H2>The Default Browser Style</H2>
<P CLASS=right>HTML style sheets are innovative primarily
in that they allow various different styles to be applied
to web pages by the author. Indeed, it could be said that
all web browsers already use a style to display text.</P>
<H2>The CSS1 Standard</H2>
<P CLASS=center>The HTML styles in Microsoft's Internet
Explorer 3.0 are based on a draft standard being
developed by the World Wide Web Consortium (W3C).</P>
</BODY>
</HTML>
Notice that an additional paragraph has been added and that the three paragraphs have been identified with classes labeled center, left, and right.
The names that are assigned to the classes are irrelevant—they simply have to match the styles that you create next.
If you reload SAMPLE.HTML into your browser at this time, you will see that the addition of the CLASS attributes did not affect the appearance of the page. This will also be true in other browsers that do not support the CSS1 standard. The document is still readable and appears as if the styles do not exist.
One way to apply a style to the classes that you have added is to create selectors that define the classes as variations of a particular HTML tag. A class selector always appears in the <STYLE> block with a period preceding it. Because you have already applied CLASS attributes called left, right, and center to the three <P> elements in the sample document, you will now create styles using class selectors named P.left, P.right, and P.center, as shown in the following modified <STYLE> block:
<STYLE>
<!--
H1 {font-size: 24pt;
color: red;
text-align: center}
H2 {font-size: 20pt;
font-style: italic;
color: blue}
BODY {font-family: "Arial";
background: yellow}
P.left {margin-right=50%}
P.right {margin-left=50%}
P.center {margin-left=25%; margin-right=25%}
-->
</STYLE>
When you add these three new styles to your SAMPLE.HTML file and reload it into the browser, you see the results shown in Figure 4.1.
)
Figure 4.1 Class selectors
allow you to apply different styles to HTML elements that use the same
tag.
Ignoring the headlines, which have not been affected by these modifications, you can see that the addition of class identifiers allows the three paragraph elements to be placed in different areas of the canvas through the application of margin properties.
Canvas The term canvas is used by the CSS1 standard to define the space in the browser window on which HTML documents are actually displayed. The word is also used to imply that a greater degree of artistic control is provided by HTML styles, which allows text to be located on the browser screen with greater consistency and control.
Notice also that the application of classes has no effect on the inheritance of style attributes from the <P> tag’s parent element. The Arial font and yellow background still pass down from the <BODY> tag’s style as before.
The styles defined for the class selectors can contain any of the formatting properties that are defined in the CSS1 standard and supported by the browser. The use of selectors that address specific combinations of HTML tags and classes provides a wide range of design effects that enhance the appearance and flexibility of your web pages.
An obvious, glaring flaw in the web page is shown in Figure 4.1. You have moved the three paragraphs to different locations on the page, but their accompanying headlines have been left behind.
One way to correct this problem is to add classes to the headline tags just as you did earlier for the <P> tags. In fact, because the headlines are to be moved in the same way as the paragraphs, you can use the same class names to modify the <BODY> section of the SAMPLE.HTML document to appear as follows:
<BODY> <H1 CLASS=left>Lesson 1</H1> <P CLASS=left> A style is simply a collection of text and layout attributes that can be selectively applied to all or part of a document. The idea of grouping them into a style allows the author to easily apply the same collection of attributes to many different parts of a document.</P> <H2 CLASS=right>The Default Browser Style</H2> <P CLASS=right>HTML style sheets are innovative primarily in that they allow various different styles to be applied to web pages by the author. Indeed, it could be said that all web browsers already use a style to display text.</P> <H2 CLASS=center>The CSS1 Standard</H2> <P CLASS=center>The HTML styles in Microsoft's Internet Explorer 3.0 are based on a draft standard being developed by the World Wide Web Consortium (W3C).</P> </BODY>
The CLASS attribute can be added to any HTML element to distinguish it from others with the same tag.
To complete the task, create specific class selectors for the headline tags called H1.left, H2.right, and H2.center. Then duplicate the style declarations that you created for the P selectors to achieve the desired result.
There is another type of class selector that makes this redundant coding unnecessary. Instead of precisely identifying all of the combinations of classes and elements and defining a separate style for each, you can create a generic selector for the class alone which is applied to any HTML element carrying that class attribute.
To do this, modify the <STYLE> block of the SAMPLE.HTML file again to appear as follows:
){kind=link}
<STYLE>
<!--
H1 {font-size: 24pt;
color: red;
text-align: center}
H2 {font-size: 20pt;
font-style: italic;
color: blue}
BODY {font-family: "Arial";
background: yellow}
.left {margin-right=50%}
.right {margin-left=50%}
.center {margin-left=25%; margin-right=25%}
-->
</STYLE>
Instead of adding to the style definitions, this time you simply removed the P from the three class selectors (leaving the periods) making them applicable to any HTML tag.
Save your changes, reload the file into the browser, and the desired effect is achieved (see Figure 4.2). The styles for the class selectors called left, right, and center are applied to all of the HTML tags (<P>, <H1>, and <H2> ) containing their respective CLASS attributes.
)
Figure 4.2 Generic class
selectors can be used to apply the same style properties to any HTML
element identified by that class.
Using these same selectors and style definitions, you could now apply the CLASS attributes to any HTML tag in the document and achieve the same effect for that element. Class selectors can be used to identify specific elements of a document, either in conjunction with, or wholly independent of, the HTML tags that define them.
In this lesson, you learned how to apply styles to specific areas of a web page using class selectors. In the next lesson, you create selectors with even greater precision.
 |
 |
 |
){kind=link}