T6L1

Cascading Style Sheets

Introduction

Since the debut of the WWW in 1989, HTML has evolved to enable designers to have greater control over the structure of a Web page. A significant enhancement has been the recommendation by the World Wide Web Consortium http://www.w3c.org/(the W3C) for the adoption of Cascading Style Sheets [CSS]. Basically, a style sheet is a set of stylistic rules that describe how HTML documents are presented to users. There are two major advantages of CSS for Web designers: It enables a Web designer to specify the attributes of an HTML tag - whether in a single page or through an entire site - with one command, and style sheets enable much more sophisticated page design (typography and layout) than previously possible.

Style sheets rely on an underlying markup structure, such as HTML; they are not a replacement for HTML. Without a binding to an element, a style really does not mean anything. The purpose of a style sheet is to create a presentation for a particular element or set of elements. For example, a Web author, through the use of style sheets, can assign properties to all instances of <H1> occurring on a page or even all pages of a site. A designer could, for example, make all H1 tags in a document appear in the Ariel font and be colored red. Furthermore, the designer could, by changing one line in a style sheet, cause all instances of the <H1> to be rendered in another way, for example, with the Comic Sans font and be colored blue. This change would "cascade" over to all HTML documents linked to the style sheet. In addition, CSS has added a large number of attributes that were not previously possible with HTML. Although not yet widely supported, CSS2 specifications have added even more options for the designer. For example, CSS2 has introduced a mechanism for closer control over printing web pages that are styled using style sheets that allows for consideration of what size the page is, whether it is orientated as a portrait or landscape, what printing marks might be required, and what margin it has. The designer can also determine where pages will break when printing.

This lesson is designed for you to gain some basic information about Cascading Style Sheets (CSS). When you finish this lesson, you should be able to:

Describe what a style sheet is and how it can be used. Describe how style sheets are constructed. Describe the ways in which the CSS specifications are integrated in a web page. Describe the advantages and disadvantages of using style sheets. Create style sheets using a variety of HTML selector elements and CLASS attributes.

This lesson will cover:

The Evolution of CSS What is a Style Sheet? How To Write Style Sheet Statements Attribute Selectors

1

T6L1

Using the <DIV> and <SPAN> Elements Using the Anchor Pseudo - class Integrating Style and Web Sites Using Text - related Properties Positioning HTML Elements with Cascading Style Sheets (CSS-P) Advantages and Disadvantages of Using CSS Utilities

Additional Resources

This lesson is designed as an introductory overview to Cascading Style Sheets. The links listed below represent some of the many on-line resources available for you to learn more about Style Sheets.

W3C CSS Specifications

W3C CSS1 Recommendation http://www.w3.org/TR/REC-CSS1W3C CSS2 Recommendation http://www.w3.org/TR/REC-CSS2Guides and Tutorials

Short Guide to CSS http://www.w3.org/MarkUp/Guide/Style.htmlArticles on using Style Sheets http://webreview.com/pub/Style_SheetsCNET Get Started With Cascading Style Sheets http://www.builder.com/Authoring/CSS/Web Monkey Style Sheet Guide http://hotwired.lycos.com/webmonkey/reference/stylesheet_guide/StyleSheet Tutorial http://hotwired.lycos.com/webmonkey/stylesheets/tutorials/tutorial1.htmlCSS Primer http://www.zdnet.com/devhead/stories/articles/0,4413,1600436,00.htmlWDVL Introduction to Style Sheets http://wdvl.com/Authoring/Style/Sheets/Tutorial.htmlCSS Quick Tutorial http://html]]help.com/reference/css/quick-tutorial.htmlCascading Style Sheets: CSS1, CSS2 Reference and Help http://www.westciv.com/style_master/academy/css_tutorial/index.htmlThe Little Shop of CSS Horrors http://haughey.com/csshorrors/Ralph Sutter's Help Pages for Cascading Style Sheets http://www.surfari.net/%7Ersutter/styles.htmlWeb Review - Style. http://style.webreview.com/CSS Pointers Group http://css.nu/Web Design Group http://www.htmlhelp.com/Index DOT CSS http://www.blooberry.com/indexdot/css/Builder.com: CSS Reference Table http://www.builder.com/Authoring/CSS/table.htmlBuilder.com: Cascading Style Sheets Topic Center http://www.builder.com/Authoring/CSSCenter/

2

T6L1

The Evolution of CSS

The W3C's first official specification for style sheets is called level one, or CSS1, and was approved in December 1996. The W3C continued to evolve CSS even though browser support was weak, and CSS2 became a recommendation in May of 1998. CSS2 contains all of CSS1's features and adds support for media-specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, and so on. This specification also supports content positioning, downloadable fonts, table layout, features for internationalization, and more.

Currently there are more than 50 properties specified under CSS1 that affect the presentation of an HTML document. Unfortunately, not all of them are supported consistently across the major browsers. Support for CSS1 is becoming usable in Netscape Navigator, and acceptable in Internet Explorer (especially versions 4.5 for Macintosh and 5 for Windows). Opera 3.6 for Windows has very good support for CSS1. Support for CSS2 is still nonexistent in Netscape Navigator 4.x, and very limited in Internet Explorer 4.5 and 5.

Broswer Support for CSS

Browser Compatibility Charts http://webreview.com/pub/guides/style/style.htmlBrowser Support Guide http://www.westciv.com/style_master/academy/browser_support/Web Review's CSS Master Compatibility Chart http://webreview.com/wr/pub/guides/style/mastergrid.html

3

T6L1

What is a Style Sheet?

A style sheet is a set of instructions written in CSS1 or CSS2 (languages) that suggests to a browser how to draw web pages. Before style sheets, changing an element that appeared on many pages or in several places on a single page required changing it each place it appeared. When you want to make a change with CSS, you simply change the style you previously defined, and that element is updated automatically wherever it appears

The major building blocks of a style sheet are a series of instructions, called statements. Each statement has a selector, which tells a browser which elements on a page are affected by this statement, and a declaration, which tells the browser how to draw these elements. A declaration is a series of properties.

A property name is one of several dozen keywords and there are several different types of values that may be associated with the property.

A simple example of a statement is shown below. This statement establishes that any H1 in the document should be displayed in the color navy.

The first part of the statement is called the selector. The selector specifies where the style should be applied, that is, which element(s) are to be affected by the declaration.

The selector is followed by the set of properties with their values - the declaration which sets forth the effect. The declaration describes how those elements should appear. In CSS, the possibilities for the control of the presentation and layout are enormously expanded over that allowed by HTML. Declarations are inside curly braces - { and } - and contain one or more properties, separated by semicolons, e.g., {font-family: verdana}.

Put the selector and the declaration together and you get the complete statement.

4

T6L1

How To Write Style Sheet Statements

As indicated above, style sheet statements are written so that selectors are followed by declarations, are inside curly braces - { like this } - and contain one or more properties, separated by semicolons. Generally, style sheets will consist of more than a single, simple statement and there are ways selectors and declarations can be combined.

Grouping

You can specify more than one selector and more than one property in a single style, and they need not be in any particular order.

Multiple selectors, same declaration

comma separated H1, H2, H3 {color: red }

Same selector, multiple declarations

semicolon separated H1 { color: red;text-align: center

}

You can also specify more than one style in a single style sheet. This style sheet has styles for BODY, H1 and P elements:

BODY       {font: 10pt;             font-family: Serif;             color: black;             background: white }

H1 { font-family: Verdana; font-size: 24px; }

P { font-family: Georgia; font-size: 18px; }

Note the formatting used above places the curly braces and each declaration on a separate line. This is a convention which makes the code easier to read, but is not required. Likewise, the semi-colon must be used to separate the declarations, but the semi-colon at the end of the last declaration is optional.

5

T6L1

Attribute Selectors

CSS has identified different categories of selectors, HTML elements being the most common. A selector identifies elements on an HTML page and browsers use selectors to determine which elements on a page are affected by a statement. In the above examples, the type selector is used to specify what tag the style will apply to, that is, the style will be applied to every instance of the element type. You can create custom styles and assign them special characteristics by using the CLASS attribute.

CLASS Attribute

A CLASS attribute enables the application of declarations to a group of elements that have the same value on the class attribute.

Suppose you were writing a Web page with instructions how to download and install a software program and you wanted the key steps to be emphasized. You decide you want certain important text to be red, have a yellow background, be bold, be larger than the rest of the text, and have a Georgia font face. You could insert all of those tags for each instance, or, you could create a CLASS attribute and save some time. There are two steps:

1. write style rules within class selector

.important {background: yellow;

font-weight: bold;

font-family: Georgia;

font-size: 14px;

color: red

}

A class selector always starts with a dot (.), this is called the flag character. Currently class names must be single words, but you can use dashes or underlines to join two words together, such as .very-important .

2. classify elements

Every time you use the <CLASS= important> tag within the document, the text will be red, have a yellow background, be bold, be larger than the rest of the text, and have a Georgia font face.

The following statement:

6

T6L1

Before you download the software, make certain that you have <CLASS= important> closed all open programs</CLASS>.

would be rendered as:

An important advantage of using the CLASS attribute, besides saving the insertion of all those individual tags, is that if you find that the red text does not look good on the yellow background, you can change the text color to navy in the declaration and it will change all instances automatically.

You can also use the selector to apply to only some instances of a particular tag by combining the CLASS attribute with elements. For example, what if you wanted every paragraph except the first to have an indent on the first line, you could use the following:

P {font-family: Georgia;font-size: 12px;text-indent: 1.5em;

}

The text-indent property indents just the first line of a paragraph. The P style now has a 1.5em indent for the first paragraph.

To specify that the first paragraph not indent, you add another style with a class selector:

.first { text-indent: 0;

}

Now you can use the CLASS attribute in your HTML to apply that style in addition to the existing style on the paragraph tag:

<P CLASS="first">

Now the first paragraph will be rendered the same as all other paragraphs except that it will not be indented. In other words, the CLASS settings overrode the P settings.

7

T6L1

Using the <DIV> and <SPAN> Elements

When you want to assign an attribute to more than one item it is helpful to group elements and give a name to this group so you can identify it in your style sheet. Currently, there are two ways to do this, with the <DIV> and <SPAN> tags. These are most often used in combination with the CLASS attribute.

The <DIV> Element

The <div> tag is generally used to apply a style to a block of text, which can also include other HTML elements:

<div class="myStyle"> <p>The "myStyle" style will be applied to this text, and to <a href="page.html">this text</a> as well. div>

Here is another example:

Include in style sheet: DIV. POEM { font-family: Vivaldi, cursive }

If you use this in the body of the document:

<DIV CLASS=POEM> Roses are red, <BR> Violets are blue, <BR> Sugar is sweet, <BR> And so are you! </DIV>

it will be rendered as:

The SPAN Element

The <SPAN> tag is used on inline text, that is, text that appears within a block of text, like a sentence within the middle of a paragraph. Using the SPAN tag with class selectors, you can create effects that are much more complex than using straight HTML. Suppose you want to highlight certain types of references using a combination of a different font, bold weight, and a different color. Without style sheets, you have to put this in each instance:

8

T6L1

<FONT FACE=" Footlight MT Light" SIZE="+1 " COLOR="#6699CC"><STR0NG> text </STRONG></FONT>

With a style sheet, you can specify all of that just once:

.high {font-family: Footlight MT Light;font-size: large;color: #6699CC;font-weight: bold;}

And then, each time you want to use this formatting, you just use the SPAN tag. The SPAN tag does not do anything at all by itself. It's only purpose is to apply a style to a span of text.

Adding to the poem example above:

Include in style sheet:DIV. POEM { font-family: Vivaldi, cursive }SPAN.FLOWER { font-family: Comic Sans, fantasy }

<DIV CLASS=POEM><SPAN CLASS=FLOWER>Roses</SPAN> are red, <BR><SPAN CLASS=FLOWER>Violets</SPAN> are blue, <BR>Sugar is sweet, <BR>And so are you!

</DIV>

This will be rendered as:

[[Note: These did not translate to word well. All examples in this section should be placed into HTML and CSS and screen-captured from there.]]

9

T6L1

Using the Anchor Pseudo-class

A pseudo-class represents dynamic states of a tag that may change under user action or over time. Currently, there is only one element type in HTML which uses pseudo-classes, the A (anchor) element. An anchor pseudo-class is a mechanism by which a browser indicates to a user the status of the hyperlinks in a document. Several standard pseudo-classes associated with the <a>tag are used to style hypertext links:

a:active customizes the style of a link when it is selected by the user.a:link customizes the style of a link that has not been visited recently.a:visited customizes the style of a link to a page that has been recently

visited.a:hover customizes the style of a link while the user’s mouse is over it.

The a:hover pseudo-class is a CSS Level 2 specification and is currentlysupported only by Internet Explorer 4.0 and above.

The selector is a combination of a type selector and a pseudo-class selector, e.g., A:VISITED, and the flag character is a colon.

You can set style rules for each of these pseudo-classes, most commonly used are underlining and color changes.

A:link { color: red text-decoration: none }A:visited { color: blue }A:active { color: green }

Note that the text-decoration: none declaration for the a.link will cause links to display without an underline.

10

T6L1

Integrating Style and Web Sites

There are three basic ways to include style information in an HTML document.A. Embed a document-wide style in the <HEAD> element of the document.B. Use an outside style sheet by linking to it.C. Provide an inline style right where style needs to be applied.

Embedding (Internal style sheets)

An internal style sheet is a list of all the CSS styles for a page. A style block is composed of an opening <STYLE> tag followed by a set of CSS rules followed by a closing </STYLE> tag. Placing style sheets within the header tags has become a convention that many designers use, although you can also apply a style sheet anywhere on a page.

The <style>tag for a Cascading Style Sheet identifies the type attribute as text/css . A sample internal style sheet looks like the following:

<STYLE TYPE="text/css"> <!--

BODY { color: navy; } H1 { font-size: 12pt; } P {text-indent: 5%} -->

The TYPE attribute specifies the type of style sheet being used.

Because style sheets are supported only by the latest browsers, you want to be certain that older browsers can still view pages that contain style sheets. You can hide style sheets from older browsers by putting comment tags <!--and --> around everything in the style container. Browsers that do not understand style sheets are prevented from displaying the style sheet in the browser window. Browsers that do understand style sheets will ignore the comments tags and apply the style sheet to the page.

External Style Sheets

To link a web page (HTML document) to an external style sheet, you place a link to the style sheet. An external style sheet is a file containing the CSS rules. The link is placed in the HEAD part of the document, using the following syntax:

<LINK REL="STYLESHEET" TYPE="text/css" HREF="example.css">

LINK REL="STYLESHEET" indicates that it is a forward link and that the link is to a style sheet.

11

T6L1

TYPE="text/css" Theoretically, style sheets might be written using any number of languages.. This attribute tells the browser in what format it is going to receive the style sheet. The content type is necessary.

HREF="example.css" tells the browser where to locate the style sheet. The destination is specified in the same way that hypertext link (A HREF="link destination") destinations are, with either a relative or absolute URL.

When you link from the HTML file to a style sheet, the browser begins reading the page, it sees the style sheet link, and downloads the style sheet, then uses the style sheet to draw the page.

Linking an external style sheet affords great flexibility in the ability to update and overhaul the appearance of a site without modifying the web pages themselves. Linking a style sheet to an HTML document simply requires using a <LINK> tag in the <HEAD> section of every document you wish to apply the style sheet to. Once you have linked a style sheet to your pages, any changes to that style sheet will apply to every HTML document to which it is linked.

Style Attribute (Embedded Rules)

The final method of applying a style inserts it within HTML tags using the style attribute introduced in HTML 4.0. The style attribute enables you to define styles on a tag-by-tag basis. This method is the most “local” of all the techniques; that is, it is closest to the tag it is affecting and therefore has the ultimate control because of the cascading nature of style sheets.

The STYLE attribute puts declarations directly into the start tags. For example:

<P STYLE="text-decoration: underline">Underlined text</P>

This attribute is used when you want to make stylistic changes to a particular occurrence of an element while leaving alone the style of all others of the some element type.

Which Method to Use?

Embedding is preferable if you want your pages to be downloaded and read off-line. If the style sheet is linked, there will be no style associated with the page when it is read off-line. In fact, Netscape Navigator may fail to load a page if the style sheet cannot be found. While internal style sheet is better than applying styles on a tag-by-tag basis using the style attribute, it still ties the style to a particular HTML document.

The major benefit of linking to an external style sheet is that you can customize and change the appearance of a Web site quickly and easily from one file.

This has limited usefulness, since by applying styles within your tags, you are not using the real benefits of style sheets for site design.

12

T6L1

The designer can use any or all of the methods depending on the particular Web site. Style sheets are said to be cascading, a term which describes the capability of a local style to override a general style. One CSS rule applying generally to a block of text can be overridden by another rule applied to a more specific part of the same text. The designer may want to define external style sheets that can be linked to individual Web pages to give consistency to the site. However, if it is desirable the designer can indicate that style on the individual page which will override the external style sheet either by using an internal style sheet or using inline styles.

13

T6L1

Using Text-related Properties

To give you an idea of how CSS has expanded the possibilities for Web page design, we can look at how CSS defines a number of different properties for working with text. The following font properties are part of the CSS specification:

font-family font-size font-style font-weight text-decoration

A. Property: font-family

Values: Name of the font family, like Verdana or Georgia or one of the following generic names:

serif sans-serif cursive fantasy monospace

You can also give a list of values (separated by commas) for font-family. For example,

H1 { font-family: Verdana, Helvetica, sans-serif

}

In that case, the system would try to use Verdana, or if that is not available, Helvetica; otherwise, it will use whatever sans-serif font is available.

Another useful text-related property is line-height. This property affects the space between lines, also called leading.

B. Property: font-size Values:

absolute size, e.g., small, largerelative size, e.g., larger, smallerlength, e.g., 14ptpercentage, e.g., 120%

C. Property: font-style Values:

normal

14

T6L1

italic oblique

D. Property: font-weight Values:

normal bold bolder lighter numerical values 100, 200, 300, 400, 500, 600, 700, 800, 900

E. Property: text-decoration

Values: none underline overline line-through blink

Using the above properties together in a style sheet, you can now control the appearance of text with more precision. For example:

H3 {font-family: Georgia;font-size: 12px;font-style: italicfont-weight: 400text decoration: underline}

There are many more properties that can affect the text presentation in a Web document. You can consult some of the additional resources included at the beginning of this lesson.

15

T6L1

Positioning HTML Elements with Cascading Style Sheets (CSS-P)

As you can see by the preceding example using some of the text-related properties of CSS, the typography options have been significantly enhanced for the designer. The CSS specification has also allowed designers to have much greater control over the page layout.

When the World Wide Web first made its debut in 1989, few people were concerned about the aesthetic layout of a page. Content and the capability to use hypertext to jump from one page to another were emphasized. After the first graphical Web browser software (Mosaic) was released, it quickly became clear that a page’s graphics and layout could enhance a Web site’s accessibility and marketability.

Until CSS, HTML was limited in how much control the designer could have over the placement of type or graphics on a Web page. Designers have had to go to elaborate lengths, using complex nested tables and one-pixel images as spacers, in attempts to achieve placement of text and graphics where they desired them. The widespread adoption of tables, released with HTML 2.0 and enhanced with HTML 3.2 helped designers to position elements, but an extension of Cascading Style Sheets now provides a more elegant solution: absolute positioning. Absolute positioning enables an element, such as an image or block of text, to be placed anywhere on the page. Known as CSS-P, the standard for positioning has been adopted fully by Microsoft and to a lesser extent by Netscape.

Using absolute positioning features of CSS allows a designer to indent text, control white space, and to place elements on a page wherever he or she desires.

Working with Layers

CSS-P is the foundation for what has become commonly known as layers. Layers are invisible containers that can hold any type and amount of Web elements - and most important, they can be positioned anywhere on a Web page to exact pixel coordinates. CSS Positioning (CSS-P) allows you to position elements two dimensionally, as well as allowing you to layer elements, or hide or display them. Both Microsoft Internet Explorer 4.0 and Netscape Navigator 4.0 (and above) support layers under the Cascading Style Sheets-Positioning specification.

The power of layers goes farther than absolute positioning, however. Layers and their contents can be made invisible or visible with a change of one property. Because CSS employs a concept known as inheritance, in which related styles take on the characteristics of the parent style, many layers can be manipulated at once. As the term implies, layers bring an illusion of depth to the Web page. By design, each layer exists in its own three-dimensional plane. You can stack one layer on top of another, or you can change their stacking order interactively.

The addition of the third dimension, depth, truly turned the positioning specs into layers. Now objects can be positioned side-by-side, and they have a z-index property as well. The z-index

16

T6L1

allows objects to be stacked upon one another. Elements with a higher z-index value will appear on top of those with a lower z-index value.

An example would be:<IMG SRC="top_image.gif" STYLE="z-index: 2: position: relative; top: 12 px; left: -25px">

Positioning Measurement

The positioning of layers is determined by aligning elements on an x-axis and a y-axis. In CSS, the x-axis (defined as “Left” in CSS syntax) begins at the left side of the page, and the y-axis (defined as “Top” in CSS syntax) is measured from the top of the page down. As with many of the other CSS features, you have your choice of measurement systems for Left and Top positioning. The measurement system options follow:

Unit Abbreviation Measurement

Pixels px Relative to the screenPoints pt 1 pt = 1/72 inInches in 1 in = 2.54 cmCentimeters cm 1 cm = 0.3937 inMillimeters mm 1 mm = 0.03937 inPicas pc 1 pc = 12 ptEMS em The height of the element’s fontPercentage % Relative to the browser window

17

T6L1

Advantages and Disadvantages of Using CSS

Advantages

Style sheets make the task of modifying a large number of pages on a site much easier. The traditional HTML approach is to code all of the appearance information about a page. If you want to change the font size and face properties of H1 in all of the pages in a site, without style sheets you have to change the properties of for every heading, in every page. With Cascading Style Sheets, you can decide how headings appear, and enter that information once. Every heading in every page that is linked to this style sheet now has that appearance.

You can ensure consistency across a site.

You can use much more sophisticated page layout and typographical control.

Disadvantages

Even though the W3C issued their CSS1 recommendation in1996, not every browser fully supports it. CSS only really works at all in Netscape Navigator 4.0x and 4.5 and Internet Explorer 3 (a little), 4, 4.5 and 5. Until recently, this has represented a small percentage of web browsers in the world.

Even though the major browsers support style sheets, the support is inconsistent. What looks good in one browser may look awful in another. The process of trial and error which accompanies trying to make a style sheet work in all major browsers can be time consuming, and extremely frustrating.

Style sheets can be very complicated and difficult to understand.

18

T6L1

Utilities

Since style sheets can get complicated, there are a variety of style sheet editors to help you compose style sheets. Below are some examples:

CoffeeCup Style Sheet Maker http://www.coffeecup.com/Top Style http://www.bradsoft.com/topstyle/Style Master and Style Master Pro http://www.westciv.com/style_master/index_dynamic.htmlPrime Style http://www.pconsulting.com.au/style/

With larger style sheets it is easy to make an error. If you submit your style sheet to the following site, they will validate it, that is, check to see if there are any errors in it.

W3C CSS Validator (submit your style sheets on-line and they will validate for you) http://jigsaw.w3.org/css-validator/validator-text.html

19

T6L1

20

T6L1

Summary

Cascading Style Sheets are a valuable tool for the Web designer to use in creating and managing Web sites. The CSS recommendations enable a Web designer to specify the attributes of multiple HTML elements in a page or site with one command. Style sheets enable much more sophisticated page design (typography and layout) than previously possible.

This lesson is designed for you to gain some basic information about Cascading Style Sheets (CSS). When you finish this lesson, you should be able to:

Describe what a style sheet is and how it can be used Describe how style sheets are constructed Describe the ways in which the CSS specifications are integrated in a Web page Describe the advantages and disadvantages of using style sheets Create style sheets using a variety of HTML selector elements and CLASS attributes

A short summary of these topics is listed below. If you do not understand these things, you should review the lesson at least once. If you are still having difficulty, you should consider other sources of information that compliment this lesson, such as textbooks, tutors, and instructors.

A style sheet is a group of statements that provide instructions to the browser as to how the page is to be displayed. Style sheets can be used to apply a uniform look to all pages in a Web site; by changing a value in the style sheet, the effect will take place on all pages using the style sheet. The specifications of CSS allow for much greater control of typography and layout than previously possible with HTML.

Style sheet are a series of statements, each having a selector, which tells a browser which elements on a page are affected by the statement, and a declaration, which tells the browser how to draw these elements.

Style sheets can be external to a page, in which case any number of pages can link to it and be directed by the same external style sheet. An internal style sheet is embedded in a Web page and is a list of all the CSS styles for a page. Finally, the use of a <STYLE> tag allows the designer to apply styles to individual elements in a page.

Style sheets are that they save time and effort in setting up, maintaining, and updating Web pages. They also have brought about enhanced typography and layout options for the Web designer, giving the Web designer an array of tools closer to that possible for printed page publishing. The disadvantage is that many of the specifications are inconsistently supported by browsers, or they are not supported at all. They also can be complicated to write.

21