| Previous | Table of Contents | Next |
In this lesson, you learn how styles can improve the appearance, readability, and manageability of your web pages.
A style is a collection of text and layout attributes that can be selectively applied to all or part of a document. These attributes can include font selection, font size and weight, margins, indentations, leading, and other properties that affect the appearance of text on the page. Grouping them into a style allows the author to easily apply the same collection of attributes to many different parts of a document.
Styles, as applied to HTML documents, provide web page designers with many advantages:
If you want to have section headings with a different font than the regular text, in a larger size, and in italics, you normally would have to perform three distinct formatting tasks for each of the headings. With styles, you would only have to create a single style definition consisting of the three desired font attributes and then apply it to each of the headings.
Styles also reduce the clutter of your HTML pages by reducing the number of tags that are needed to create a particular effect. To achieve the desired effect for the headings described above using normal HTML tags, you would have to change this line of code:
<H2>This is a Headline</H2>
to this one:
<H2><FONT FACE="ARIAL" SIZE=5><B><I>This is a Headline </I></B></FONT></H2>
for all of the headings in the document. HTML styles allow you to actually change the default behavior of standard tags like <H2>. By assigning a style to the <H2> tag that calls for Arial, size 5, and bold italic type, no changes have to be made to the headline coding at all.
In addition to the savings in time and effort gained in applying formatting to text, styles also make it much easier to modify your designs once they are applied. To change the appearance of all of the headlines to which you have applied a style, simply change the style definition itself and all of the headlines change. This makes it easier to experiment with different design ideas and readily see the results of your efforts.
Styles have been a common tool in word processing and page layout programs for many years, but they are only now being developed for use in HTML documents.
HTML style sheets are innovative primarily because they allow various styles to be applied to web pages by the author. All web browsers already use a default style to display text.
Most web browsers allow the user to modify the way in which text displays on the screen. All versions of Netscape Navigator and Microsoft Internet Explorer allow you to select background colors and the type and color of the font. The default style for the Internet Explorer on the Windows platform, for example, displays black Times New Roman text on a blue background, as shown in Figure 1.1. These attributes can be overridden by settings specified in the HTML code itself.
)
Figure 1.1 The appearance of a
web page’s text in any browser is the default style of that browser.
This display is, in fact, using a style. As described earlier, you can globally change the appearance of a document by modifying settings in the web browser to select a different font, a different text background color, or even a different default text size. This allows the browser to be customized to the user’s preference and accommodates the needs of different sized screens or users with vision difficulties.
Two fundamental problems exist with the default browser style. It is a single style that must be universally applied to all documents and it is completely under the control of the user. As a result, authors have little or no say regarding many aspects of the appearance of text in their web pages.
People with desktop publishing experience often express frustration at the limitations imposed upon them by HTML. They are used to a tremendous degree of flexibility that allows them to select from thousands of fonts and to place text or graphics at precise locations on the page.
Unfortunately, the nature of the World Wide Web has thus far made this kind of design flexibility impossible. A web browser can only use the fonts that are installed on the user’s computer, and the author has no way of knowing what those fonts are. What’s more, the page on which the author’s document presents (that is, the browser window), can be adjusted to any size so the document must be able to conform to the chosen size.
HTML style sheets are the result of an effort to return a greater amount of these fundamental design decisions to web page authors by allowing them more control over the appearance of the text and white space in their documents that displays in the reader’s web browser.
White Space White space is an expression used by page layout artists to describe all of the area on any color page that is not covered by text or other elements. It can include margins on all four sides of a page, paragraph indentations, and even the space between lines of text.
In an effort to overcome the design limitations imposed by the HTML language, many web page authors have come up with their own workarounds. They have invented ways to use HTML tags in ingenious ways to achieve particular ends. You can, for example, surround a paragraph with one or more <OL> or <UL> tags to create a left indent or use <BLOCKQUOTE> tags to indent on both sides. The use of borderless tables is now a standard means of providing some page layout flexibility.
These techniques are useful and often ingenious, but they are usually quite clumsy. They provide a given effect but with a very limited amount of control. You may have to “unlearn” these techniques when you create HTML documents using styles. In addition, adapting existing HTML documents to use styles may require the removal of the nonstandard tags, especially if you intend to save your style sheets as separate files and apply them to multiple HTML documents.
HTML styles enable much more control over the effects they provide than any other method of HTML coding. By the use of absolute or relative values, precise measurements of margins, indents, and other white space elements are possible.
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. The specification, called Cascading Style Sheets, Level 1 (or CSS1), is still to be considered a work-in-progress, but the basic conception and syntax for the application of style sheets to HTML documents is complete.
You can examine the current version of the CSS1 draft standard at the World Wide Web Consortium’s web site at http://www.w3.org/pub/WWW/TR.
Although Internet Explorer 3.0 is currently the only major web browser to support HTML style sheets, Netscape has committed to supporting style sheets in its Navigator 4.0 release in early 1997.
Another advantage of HTML styles (as defined in the CSS1 standard) is that the new codes used to define the styles do not affect the appearance of an HTML document in a browser that doesn’t support styles. A web page with applied styles is still readable in any browser.
Because the CSS1 standard is in development, the style sheet support provided in Internet Explorer 3.0 differs from the standard in several ways, as follows:
Some of the features that have not yet been realized in this version of the browser are included in this book for the sake of completion and adherence to the standard, and they are identified as such in the lessons.
HTML styles can be applied to web pages in three different ways:
The syntax of the style definitions are basically the same for each of the three types. The style types can also be combined in a single document. It is the relationship between the types that results in the cascading effect mentioned in the title of the CSS1 standard. In Lesson 2, you learn to create embedded styles first because they introduce nearly all of the essential concepts that you need to use styles.
Linked and inline styles, as well as the mixing of style types, are covered in Lessons 18, 19, and 20. By that time, you will know how to use all of the basic text formatting properties and be ready to consider the bigger picture of your web site’s documents as a whole.
Linking to a Style Sheet
The term style sheet implies that the styles are stored in a file that is separate from the actual content of the documents. An HTML file uses the <LINK> tag as a reference to the style sheet. When you use HTML style sheets in this manner, you store your styles in a central location and apply them to many different documents. Conversely, you can apply multiple style sheets to a single document and allow them either to create a cumulative effect or to provide a menu to the readers so they can select the style of their choice.
Embedding a Style Block
You can also include your styles within the individual documents to which they are applied. By embedding them within the <HEAD> tags of an HTML file, the styles remain invisible to the reader and can be applied to many different elements of a web page.
Using Inline Styles
Inline styles are included as attributes within the actual HTML tags of a document. This means that they affect only the single element to which they are applied. Inline styles defeat some of the major advantages of styles because they add more code and clutter to the body of the document instead of less. Some occasions call for you to apply a special style to a single element, and an inline style definition is the quickest and easiest way to do it.
In this lesson, you learned how HTML style sheets can help you create better web pages. In the next lesson, you learn the basic method for adding styles to HTML documents.
 |
 |
 |
){kind=link}