| Previous | Table of Contents | Next |
In this lesson, you learn how to create styles in HTML documents that modify the effect of standard HTML tags.
Anyone who has created an HTML document is familiar with the standard effects produced by certain HTML tags. Headline tags are in boldface, list tags are indented, and so forth. With styles, you can actually modify the properties that are applied to your documents with the various HTML tags.
Before creating and applying styles, you must have an HTML document to work with. To begin, open your text editor and create a simple HTML document containing at least two different levels of headlines and some paragraph text, as follows:
<HTML> <HEAD> <TITLE>10-Minute Guide to HTML Style Sheets</TITLE> </HEAD> <BODY> <H1>Lesson 1</H1> <P> 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 CSS1 Standard</H2> <P>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), an independent body devoted to the creation and development of open web standards.</P> </BODY> </HTML>
You can use any text you wish in the document as long as the HTML tags are the same. Once you are finished, save the document on your local hard drive as a file called SAMPLE.HTML (or any other file name you prefer) and load the file you have just created into the Internet Explorer, using the following procedure:
TIP: Opening Files Rather than use the File Open dialog box, you can simply locate the desired file in the Windows Explorer or the My Computer window and double-click it.
You should now see your HTML code in the text editor and also in your web browser, as shown in Figure 2.1.
)
Figure 2.1 A basic web page
using standard HTML codes will cause the browser’s default style to be
applied to the text.
Each time you make a change in the code, save your changes in the editor and then refresh the document in the browser by pressing the F5 key, typing <CTRL>+R, or selecting Refresh from the browser’s View menu to view the results.
The creation of a style begins with the application of a new <STYLE> tag. When you are creating embedded styles in an HTML document, it is best to place the <STYLE> tag within the HEAD section of the document, that is, anywhere between the <HEAD> and </HEAD> tags. As is usually the case with HTML, you must have both an opening <STYLE> tag and a closing </STYLE> tag. Place the style definitions that you wish to embed in the document between these two tags.
The style definitions consist of three parts:
A selector designates where a particular style definition is applied to an HTML document. In this lesson, the selectors are regular HTML tags whose default appearance will be modified. This is called a simple selector. A later lesson covers the creation of more complicated selectors.
TIP: See Lesson 4, “Applying Styles with Class Selectors,” and Lesson 5, “Using Contextual Selectors,” for instruction on creating advanced selectors.
Within the opening and closing <STYLE> tags, each selector is specified on a separate line followed by the properties and values that are to be assigned to that selector.
A property is one of the general parameters that a style can apply to the parts of an HTML document. Properties can be indicated by a particular selector, such as font size, color, or text alignment. A value is assigned to each property to define the precise nature of the parameter to be applied. For example, the font-size property may have a value of 16 points and the color parameter may have a value of black, red, or blue. The combination of a property and its value is called a rule.
The properties that are to be assigned to a particular selector always begin on the same line as the selector with at least one space between them. You enclose the properties in curly brackets and separate them with semicolons. Separate properties from their values with colons.
TIP: Complete discussions of all the style properties available and their possible values can be found in Lessons 7 through 17.
Adding a basic embedded style sheet with simple selectors and a few simple properties to the sample HTML document you created above, makes the file appear as follows:
){kind=link}
<HTML>
<HEAD>
<TITLE>10-Minute Guide to HTML Style Sheets</TITLE>
<STYLE>
<!--
H1 {font-size: 24pt; color: red; text-align: center}
H2 {font-size: 20pt; font-style: italic; color: blue}
-->
</STYLE>
</HEAD>
<BODY>
<H1>Lesson 1</H1>
<P> 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 CSS1 Standard</H2>
<P>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), an independent body
devoted to the creation and development of open web
standards.</P>
</BODY>
</HTML>
Notice that the only changes made to the document are within the <HEAD> tags. When you are using simple selectors, no change to the body of the document is needed.
Add the style definitions shown previously (the <STYLE> tags and everything in between) to your SAMPLE.HTML file and reload it into the Internet Explorer. You should see a display like the one shown in Figure 2.2
)
Figure 2.2 The addition of
styles changes the appearance of the sample web page without altering any
of the body code.
TIP: Adding Remarking Codes You can place your <STYLE> tags and their enclosed definitions within the <BODY> tags of your document. Locating them in the <HEAD> section, however, ensures that the codes do not display as text when viewed in a browser that does not support style sheets. When locating styles in the body of a document, enclose the style definitions within remark codes (that is, <!-- before and --> after) as shown in the previous sample. A browser that doesn’t support styles ignores the <STYLE> and </STYLE> tags, but will display the definitions themselves as paragraph text, unless instructed otherwise.
As you can see, the headlines increase in size and their color changes. The <H1> headline is now centered and the <H2> headline is italicized. Although no text-align property was specified for the H2 selector, the <H2> tag in the document retains the left-justification applied by the default browser style.
Styles behave in this way for all selectors and properties. Only the properties defined for a particular selector change in the document by the addition of the style. All other properties retain the values that they would normally possess.
You are, of course, not limited to the use of headline tags as simple selectors. You can apply style definitions to any existing HTML tag to change its appearance in the browser. You can apply style properties to an entire document by using the <BODY> tag as a selector, or to a single word or character using tags like <STRONG> and <EM>.
In this lesson, you learned the basic technique for embedding a style in an HTML document. In the next lesson, you add more styles to your sample document and see how the styles assigned to different parts of a document interact with each other.
 |
 |
 |
){kind=link}