Cascading Style Sheets Enable Much More Sophisticated Page Design (Typography and Layout)

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

· Using the <DIV> and <SPAN> Elements

· Using the Anchor Pseudoclass

· Integrating Style and Web Sites

· Using Textrelated 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-CSS1

W3C CSS2 Recommendation http://www.w3.org/TR/REC-CSS2

Guides and Tutorials

Short Guide to CSS http://www.w3.org/MarkUp/Guide/Style.html

Articles on using Style Sheets http://webreview.com/pub/Style_Sheets

CNET 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.html

CSS Primer http://www.zdnet.com/devhead/stories/articles/0,4413,1600436,00.html

WDVL Introduction to Style Sheets http://wdvl.com/Authoring/Style/Sheets/Tutorial.html

CSS Quick Tutorial http://html]]help.com/reference/css/quick-tutorial.html

Cascading Style Sheets: CSS1, CSS2 Reference and Help http://www.westciv.com/style_master/academy/css_tutorial/index.html

The Little Shop of CSS Horrors http://haughey.com/csshorrors/

Ralph Sutter's Help Pages for Cascading Style Sheets http://www.surfari.net/%7Ersutter/styles.html

Web 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.html

Builder.com: Cascading Style Sheets Topic Center http://www.builder.com/Authoring/CSSCenter/

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.html

Browser 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

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.

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;

textalign: 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 {

fontfamily: Verdana;

fontsize: 24px;

}

P {

fontfamily: Georgia;

fontsize: 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.

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;

fontfamily: Georgia;

fontsize: 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:

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 {

fontfamily: Georgia;

fontsize: 12px;

textindent: 1.5em;

}

The textindent 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 {

textindent: 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:

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.

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:

<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 { fontfamily: Vivaldi, cursive }

If you use this in the body of the document:

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:

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

.high {

fontfamily: Footlight MT Light;

fontsize: large;

color: #6699CC;

fontweight: 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 { fontfamily: Vivaldi, cursive }

SPAN.FLOWER { fontfamily: Comic Sans, fantasy }

<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.]]