ch07

Cascading Style Sheets

HTML 4.0 Professional Skills Development 7-1 Copyright by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited.


Objectives

Understand the purpose of CSS as it relates to HTML.

Create a simple CSS style sheet.

Be aware of the limited support of both Level 1 and Level 2 CSS.

Learn about many of the selectors in the CSS specifications.

Learn about the and tags.


7-2 HTML 4.0 Professional Skills Development Copyright by Application Developers Training Company and AppDev Products Company, LLC All rights reserved. Reproduction is strictly prohibited.

7.17.17.17.1 Cascading Style Sheets Overview

What Is CSS?

Cascading Style Sheets (CSS) were developed in 1994 as a way to separate style and formatting information from the raw content of HTML pages. This provided developers with a new set of tools that allowed them to have greater control over how their HTML documents were formatted. It also gave them the ability to centralize where certain formatting instructions are kept, giving them better maintainability of a large Web site.

The CSS standard was immediately accepted by the W3C and has been standardized under two levels: CSS Level 1 and CSS Level 2. CSS Level 1 was released first and defines most of the standard formatting instructions. CSS Level 2 contains all of the Level 1 features plus many additional, more advanced formatting instructions.

To define CSS, lets take a look at its name.

Sheets: CSS is about collecting formatting and layout instructions and pulling them out of your document. These sheets, which simply contain a sequential list of all formatting instructions, can exist both as an external document or can be embedded within your HTML document.

Style: CSS is only about formatting and layout. It is not concerned with the actual content of your HTML document, only in how to display it.

Cascading: CSS allows for a hierarchy of formatting and layout instructions. It is quite common to create multiple style sheets for a single or for a group of HTML documents. Some documents apply more generic formatting instructions, while others apply more specific instructions based on the context of certain tags. CSS documents and HTML documents have a many-to-many relationship. One CSS document could be applied to many HTML documents and each HTML document could have multiple CSS documents applied to it.

To better understand how cascading style sheets work, take a look at the following HTML document:

7.1 Cascading Style Sheets Overview


CSS Example

Internet Technologies Topics You Should Know:

HTML XML VBScript JavaScript

The code above is a simple HTML example and it is easy for the human eye to separate out what is HTML markup and what is content. But the above document is not considered an industry normal HTML document. Corporate Web sites of today want extensive text formatting and complex layouts and as those are applied, the content becomes more difficult to see.

Take a look at this update of the previous HTML document:

CSS Example


HTML XML VBScript Java TCP/IP



As more and more formatting instructions are added, the content becomes harder and harder to distinguish. Add tables, images, and frames into the mix and the content becomes almost invisible.

Below is a simple CSS document that controls how some of the tags should be formatted. The first portion of each line (P, H1, and LI) is called the selector and the second portion (the formatting instructions) is called the declaration. Selectors can be any HTML tag as well as numerous pseudo elements described later. Declarations can be any of dozens of stylistic control points defined in the CSS specification.

P { font-family: Tahoma; font-size: 12pt } H1 { font-family: Arial; font-size: 24pt; font-style: italic; text-align: center } LI { font-size: 9pt; font-weight: bold }

There are many ways to associate a style sheet with a source document. For the sake of this example, lets store this CSS information externally under the file SAMPLE.CSS. If you take the previous HTML document that was burdened with formatting instructions and point it to this style sheet, the HTML document would look like the following:

CSS Example


HTML XML VBScript Java TCP/IP



Notice that some of the formatting instructions have been removed. Also, there is a new tag in the header portion of the document call . When the browser interprets this document, the browser will first load the CSS document and apply all the formatting instructions to the HTML document prior to displaying.

Figure 1 shows the earlier HTML document in Internet Explorer.

Figure 1. An HTML document using CSS.

As Figure 1 shows, the formatting instructions from the CSS document were definitely applied. The tag is centered and in italics, the bulleted list is bolded, and the first tag is in the Tahoma font just to name a few.

With external style sheets, multiple HTML documents can share the same tag and therefore have the same formatting instructions applied. This makes updating a large site with new or different formatting instructions increasingly easy.

CSS Level 1

Cascading Style Sheets, Level 1 (CSS1) became a W3C recommendation in December 1996. This edition defined many of the standard font and color formatting instructions for CSS. Table 1 shows a list of many of the popular CSS1 formatting instructions.



Property Type Available Properties

Font properties font-family, font-style, font-variant, font-weight, font-size, font

Color and background properties

color, background-color, background-image, background-repeat, background-attachment, background-position, background

Text properties word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, text-align, text-indent, line-height

Box (or layout) properties

margin-top, margin-right, margin-bottom, margin-left, margin, padding-top, padding-right, padding-bottom, padding-left, padding, border-top-width, border-right-width, border-bottom-width, border-left-width, border-width, border-color, border-style, border-top, border-right, border-bottom, border-left, border, width, height, float, clear

Classification properties

display, white-space, list-style-type, list-style-image, list-style-position, list-style

Table 1. CSS Level 1 formatting instructions.

Some properties, like font-size, take numeric values and measurement units (e.g., 10 pt, 1 in, or 25 cm, etc.), while others like font-style take string values (e.g., normal, italic, or oblique). Still others, like font-weight can take either a string or a numeric value (e.g., normal, bold, lighter, bolder, 100, 200, etc.).

TIP: The complete CSS1 specifications can be obtained by visiting the W3C Web site at http://www.w3.org/TR/REC-CSS1. Resources relating to CSS are also on the W3C site at http://www.w3.org/Style/CSS.

CSS Level 2

Cascading Style Sheets, Level 2 (CSS2) became a W3C recommendation in May 1998. The main features of CSS Level 2 are best stated directly from the W3C Web site:

CSS2 supports media-specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, Braille devices, handheld devices, etc. This specification also supports content positioning, downloadable fonts, table layout, features for internationalization, automatic counters and numbering, and some properties related to user interface. taken from http://www.w3.org/tr/rec-css2.

In short, CSS Level 2 adds dozens and dozens of new features and behaviors to Level 1, and there are so many that its difficult to even summarize your options in a meaningful way. What well do in this section is concentrate on a



small number of features that are of particular interest to designers working with HTML documents.

Browser Support

Internet Explorer 3.0 (IE 3) was the first to support CSS1 and did so even prior to its recommendation by the W3C. The support was by no means complete. IE 3 only supported a portion of the font, text, color and background color features. Not to be outdone, Netscape came out with its CSS1 support in Navigator 4.0. Unfortunately, because of an aggressive schedule many of the features hadnt been thoroughly tested so you will find that its support is quite buggy.

Microsoft has continued to release newer versions of Internet Explorer: 4.0, 5.0, and 5.5. Each new release added more support for CSS1 and also CSS2. Unfortunately, neither Netscape nor Microsoft has a release at this time that covers 100% of CSS1 or CSS2. If you are looking for a browser with the best CSS support, you cant necessarily rely on the larger companies. You will need to turn to a small Norwegian company called Opera Software who has a product called Opera 4.02.

NOTE You can find out more about Opera 4.02 at Opera Softwares Web site at http://www.opera.com.

The simple fact regarding cascading style sheets is that support is flaky at best and you need to perform sufficient testing prior to the release of any Web site. For assistance in determining CSS support among Microsoft Internet Explorer, Netscape Navigator, and Opera check out the following Web site.

http://webreview.com/wr/pub/guides/style/mastergrid.html



7.27.27.27.2 Using Style Sheets

There are three ways to employ CSS styles on a Web page:

in-line styles

embedded style sheets

linked style sheets

Youll learn about each of these methods in the following sections.

In-Line Styles

An in-line style is included with the tag it affects. The formatting or layout instruction used is then limited to the contents of just that individual tag. To create an in-line style, simply add the STYLE attribute right into the attribute list of the tag. For example, take the following HTML document:

CSS Example

Internet Technologies

Topics You Should Know:


Figure 2 shows the HTML document using Internet Explorer.

7.2 Using Style Sheets


Figure 2. Using in-line style sheets.

Using in-line style sheets, each tag is assigned its own formatting instruction. You might be wondering if this is counter-productive. Mentioned earlier, the purpose of CSS was to pull formatting instructions outside of the document.

In-line style sheets come in handy when you need precise control. A good example where in-line style sheets are useful is where you need to have all instances of a tag set to the same formatting instruction except one. This can be accomplished by using a linked or embedded style sheet to accommodate the global formatting instruction and the one unique tag can take the in-line style sheet. In-line style sheets will always take precedence over embedded and linked style sheets.

Embedded Style Sheets

With embedded style sheets all the formatting instructions are collected and placed at the top of the HTML document. All instructions must be enclosed within the tag. Although you can place the tag anywhere within the document, it is good practice to place the tag within or just after the tag. This provides a central location for easy access.

The formatting instructions you place between the tags have the following format:

Selector { style1:value1; style2:value2; etc. }



The selector refers to a valid tag that may or may not exist within the document. So for example, it you wanted to apply a style to all tags, the selector would be H1. This is followed by a left curly brace and a list of styles and their respective values. Each style/value pair is separated by a semicolon. You may list as many of these pairs as you need. At the close of the list, include the right curly brace. After that, you can include additional selectors or use the closing tag.

Here is the same example you saw in the in-line style section only this time it will use embedded styles:

CSS Example

h1 { font-family: Arial; font-size: 24pt; font-style: italic; text-align: center } p { font-family: Tahoma; font-size: 12pt } li { font-family: Tahoma; font-size: 9pt; font-weight: bold }



NOTE In order to have two of the list items non-bold, in-line styles were used by this example.

Figure 3 shows the previous HTML document using Internet Explorer.



Figure 3. Using embedded style sheets.

In practice you will most likely find yourself using this type of style sheet. It gives you great control over each page and lets you tweak the site quickly and easily. If you are shooting for a more unified site, then linked style sheets might be your best option.

Linked Style Sheets

Converting from an embedded style sheet to a linked style sheet is really a simple task. The term linked comes from the fact that the information that is normally between the opening and closing tags is now stored in an external text file. Cutting out all the text between the tags and pasting it into a separate file is all that is needed to create the linked file.

To complete the conversion, you will need to modify the document to include the proper instructions on how to locate this external file. Place the following tag inside the tag.

The location value of the HREF attribute refers to a path or URL that points to the external CSS document. Valid options for this include the following:

href="mycss.css"



href="styles/mycss.css"

href="http://styles.appdev.com/styles/mycss.css"

To convert the previous example that used embedded styles sheets, you would first create the external document. The contents of the file SIMPLE.CSS follows:

h1 { font-family: Arial; font-size: 24pt; font-style: italic; text-align: center } p { font-family: Tahoma; font-size: 12pt } li { font-family: Tahoma; font-size: 9pt; font-weight: bold }

To convert the HTML document, you would first remove all the text within the tags, including the tags. Then add the appropriate tag to the header. Here is the final HTML document:

CSS Example



Figure 4 shows the previous HTML document using Internet Explorer.



Figure 4. Using linked style sheets.

Combining Style Sheets

All three figures: Figure 2, Figure 3 and Figure 4 look identical and to the user viewing the page; they are. Each of the three style sheet options can be used to create the exact same output. Which you choose depends on the control you need. It is not uncommon to use all three style sheets within the same Web site, or the same page.

As the HTML document is processed, it applies each style sheet as it works down the document from top to bottom. If you are consistent in placing the tags in the header and following them with embedded style sheets your processing order will go like this:

First, the linked style sheet is applied globally to the HTML document.

If any of the embedded instructions conflict with the linked style sheet, they will override their settings with their own.

Finally, the in-line styles will override any conflicting settings that either the embedded style sheet or the link style sheets defined.

With proper planning you can utilize each of these levels and define the appropriate instructions for each: Those that are global to your site, those that are specific to a page, and those that are specific to a tag.



7.37.37.37.3 Formatting and Layout

In this section you will be introduced to many of the CSS1 and CCS2 attributes that apply to the formatting and layout of your HTML document. The attributes have been broken down into four categories:

Font attributes

Color attributes

Margins and Alignment

Positioning

Font Attributes

CSS offers many attributes to replace and extend many of the font and text formatting tags that exist within the HTML markup language. Listed below are the six most common font-formatting attributes of CSS:

font-family

font-style

font-variant

font-weight

font-size

text-decoration

font-family

The font-family attribute sets the font face or the font family that is to be used by the selector. To assign a specific font face, simply include that font name as the value. The CSS instruction below sets the font of the tags to Comic Sans MS.

H1 { font-family: Comic Sans MS }

Even on large networks, let alone the Internet, there is a good chance that a user may not have the requested font face. It is good practice to include a list of font faces so that if the users machine doesnt have your first choice, you can include additional choices. In this CSS instruction, the font face tried first is Tahoma, then Arial, then Courier.

7.3 Formatting and Layout


H1 { font-family: Tahoma, Arial, Courier }

As a truly last resort, you can reference fonts by their family name rather than their physical name. Table 2 shows the available families and an example of their fonts.

Font Family Example

serif Times New Roman -- ABCDEFG abcdefg

sans-serif Arial -- ABCDEFG abcdefg

monospace Courier New -- ABCDEFG abcdefg

cursive Lucida -- ABCDEFG abcdefg

fantasy Jokerman -- ABCDEFG abcdefg Table 2. Available font families.

An example of using a font family is shown as follows:

H1 { font-family: garamond, times, serif }

TIP: Savvy Web authors will place a font family at the end of their list. Even if all the fonts listed are unavailable, your page can still rely on a unique family to find the appropriate font face.

font-style

The font-style attribute has two useful values, normal and italic. Theres also an oblique option that has the same general effect as italic. Italic fonts are specially designed to look good, while oblique uses an algorithm to blindly slant the text. The example below sets the paragraph to italics.

P { font-style: italic }

font-variant

The font-variant attribute allows for normal and small-caps. Small-caps is used to substitute smaller-sized capital letters for all of the lowercase letters, which can sometimes be put to good use for headings. To format all tags to small caps, you would use the following:



H2 { font-variant: small-caps }

font-weight

The font-weight attribute has numerous options in how it is defined, most of which are either unsupported or impossible to tell apart on most computer displays. As a rule, stick with the simple options like bold and normal.

Other options include a numeric scale from 100 to 900 in increments of 100. The value 400 is approximately the same as normal and the value 700 is approximately the value of bold. As you might be wondering, do most fonts have nine shades of bold? No, they dont. Most have only twonormal and bold.

Another option is to use the relative bolder and lighter options that move the shade of bold based on the tags parent tag. Again, be careful if you use this because your users browser may not be able to accommodate your request.

A simple example of the font-weight attribute is shown below. This example will make the list item appear in bold font.

LI { font-weight: bold }

font-size

The font-size attribute sets the size of the font. CSS provides four different notations to define the size. These four, along with examples of each are listed in Table 3.

Notation Example

relative keyword xx-small, x-small, small, medium, large, x-large, xx-large

relative to parent smaller, larger

percentage of parent 50%, 30%, 120%

absolute measure 18 pt Points 0.5 in Inches 3 cm Centimeters 30 px Pixels

Table 3. font-size notations.

Below is an example that sets the current paragraphs font to large:



P { font-size: large }

TIP: Because you cant control the type of browser or the device used to view your page, its a good idea to avoid absolute sizes. By using values like small, medium, and large you leave it up to the browser to assign what it considers appropriate for that device whether it is a Macintosh or a Palm Pilot.

text-decoration

The text-decoration attribute decorates the text using the following values: none, underline, italic, and line-through. You can use this attribute to add, or in some cases remove, decorations. The CSS statement below sets all line items to italics:

LI { text-decoration: italic }

TIP: A common use for the text-decoration attribute is to remove the underline from text-based hyperlinks. To remove the underline from a hyperlink, use the following CSS instruction:

Color Attributes

Color is a great way to draw attention to content. CSS supports the use of arbitrarily specific 24-bit color values, but in practice you should strive to make do with 256 and preferably only 16 colors. Table 4 shows the three supported color attributes.

Attribute Description

color Sets the foreground color for the content of a tag.

background-color Sets the background color for the content of a tag.

border-color Sets the border color for the content of a tag. Table 4. Color attributes.



Table 5 shows the keywords you can use to reference the 16-color pallet. These make up the lowest common denominator among browsers and platforms, so your design stands a good chance of being rendered correctly.

Aqua Gray Navy Silver

Black Green Olive Teal

Blue Lime Purple White

Fuchsia Maroon Red Yellow Table 5. 16-color keywords.

The following CSS statement can be used to set the background color of the entire Web page to gray and the foreground to white.

BODY { background-color: gray; color: white }

Figure 5 shows the above CSS instruction in Internet Explorer.

Figure 5. Using the color attributes.

Colors can also be defined in terms of their RGB value. RGB stands for the colors red, green, and blue. All 16.7 million colors that browsers support can be represented in quantities of each of these colors.

To create an RGB value, imagine you are mixing red, green, and blue paint. As you mix the paint, imagine that each of the three paints can be assigned a quantity level between 0 and 255 where 0 is no color and 255 is all the color.



Take the three values, convert them to hexadecimal (i.e., 255 = FF), and concatenate them togetherRed + Green + Blue. The result, prefixed with a pound sign (#) creates a valid RGB value for the color attributes.

Table 6 shows some sample colors and their respective hexadecimal values.

Color Hexadecimal Value

Red #FF0000

Green #00FF00

Blue #0000FF

Gray #808080

Yellow #FFFF00

Fuchsia #FF00FF

Cyan #00FFFF

Black #000000

White #FFFFFF Table 6. Color values in hexadecimal.

The following CSS instruction sets the background of a Web page to cyan:

BODY { background-color: #00FFFF }

NOTE Using the keyword cyan and the hexadecimal value #00FFFF will generate the exact same color.

Margins and Alignment

Most viewer-friendly Web pages are usually laid out in a fashion that is easy to read and inviting to the eye. Margins and proper text alignment greatly assist you in creating good design. Table 7 shows the common attributes of CSS dealing with margins and alignments.




margin-left Sets the left margin of the page. Valid units include points, inches, centimeters, and pixels.

margin-right Sets the right margin of the page. Valid units include points, inches, centimeters, and pixels.

margin-top Sets the top margin of the page. Valid units include points, inches, centimeters, and pixels.

text-indent Sets the indent level for text. Valid units include points, inches, centimeters, and pixels.

text-align Sets the alignment for a block of text. Valid values include left, center, and right.

Table 7. Margin and alignment attributes.

Here is a sample HTML document using these attributes:

CSS Example

BODY { margin-top: 1in } h1 { font-family: Arial; font-size: 24pt; font-style: italic; text-align: center } p { font-family: Tahoma; font-size: 12pt } li { font-family: Tahoma; font-size: 9pt; font-weight: bold } ul { text-indent: 100px }





The previous HTML sets the browsers top margin to 1 inch and the unordered list items will be indented 100 pixels. Figure 6 shows the HTML document in Internet Explorer.

Figure 6. Using margin settings.

Positioning

CSS provides attributes that allow you to fine-tune the positioning of content on the browser. You have the choice of either setting a position relatively or absolutely. You will look at each option individually.

Relative Positioning

Relative positioning is actually the default positioning mechanism browsers have been using since day one. When you place an image on the screen, its location is in direct relation to the text around it. If you add more text before the image, the image moves down the page.

Relative positioning in CSS allows you to manipulate how the content is placed relative to the default location the browser tries to set. Positioning requires three attributes shown in Table 8.




position Sets whether the positioning values are relative or absolute. Valid values include relative and absolute.

top Sets the distance from the top border to the content. Valid units include inches, centimeters, points, and pixels.

left Sets the distance from the left border to the content. Valid units include inches, centimeters, points, and pixels.

Table 8. Positioning attributes.

The HTML below uses relative positioning to swap the location of the bullet list with its title:

CSS Example

h1 { font-family: Arial; font-size: 24pt; font-style: italic; text-align: center } p { font-family: Tahoma; font-size: 12pt; position: relative; top: 1in; left: 80pt } li { font-family: Tahoma; font-size: 9pt; font-weight: bold } ul { position: relative; top: -50px; left: 100px }



Figure 7 shows the result.



Figure 7. Using relative positioning.

Absolute Positioning

As your page becomes more advanced, you may see a need to perform absolute positioning. This positioning allows you to place an item at a specific location on the browser. You position items by defining its (x,y) coordinate where (0,0) equates to the upper-left corner of the browser window.

Absolute positioning uses the same attributes as the relative positioning section. These attributes are shown in Table 8. Below is a sample HTML document using absolute positioning:

CSS Example

HTML and CSS

HTML and CSS are very Powerful!

are very Powerful!



Figure 8 shows the previous HTML in Internet Explorer. Absolute positioning was used to create a drop shadow behind the text.

Figure 8. Using absolute positioning.

7.4 Advanced Techniques


7.47.47.47.4 Advanced Techniques

In this section you will see some new techniques that can provide you with better control over your layout, as well as some shorthand tips to cut down on the size of your style sheets.

and

The HTML markup provides two tags that can be used to help separate out a portion of content. In many cases, choosing the right tag to assign a formatting instruction is pretty straightforward. But you almost always find cases where it is not as straightforward. For example, take a look at the following HTML:

CSS Example

This is a powerful technology!

How would you go about applying formatting instructions to only the word powerful? Since it is not immediately surrounded by tags, it is not obvious how to format it without formatting the entire paragraph.

The tags and will help in this situation. Both can be used to section off a portion of another tags content. The difference between the two is that will automatically include a line-break both before the tag and after the tag while does not.

Take a look at the following HTML:

CSS Example

This is a

powerful Internet technology!



Figure 9 shows the previous HTML. Notice that the tag caused the word technology to be placed on its own lineeven the exclamation mark received its own line.

Figure 9. Using and .

Both of these tags provide the Web developer with greater control in applying formatting instructions to specific elements.

Classes and IDs

Another feature that provides additional control is HTMLs CLASS and ID attributes. CSS allows you to apply specific formatting instructions based on either the CLASS attribute value or the ID attribute value.

The following HTML document, used in previous examples, uses an external CSS document:



CSS Example



In this document, three tags have a CLASS attribute defined and all have the same value assigned, bold-me. With this CLASS attribute, it is possible to assign formatting instructions to tags that only have that attribute value. The following shows the content of SAMPLE9.CSS, the style sheet assigned to this HTML document:

h1 { font-family: Arial; font-size: 24pt; font-style: italic; text-align: center } p { font-family: Tahoma; font-size: 12pt } li { font-family: Tahoma; font-size: 9pt } li.bold-me { font-weight: bold }

The syntax necessary to reference a CLASS attributes value is the tag name, followed by a dot (.), followed by the literal value. In the style sheet above is the instruction to bold all list items that have the attribute CLASS with the value bold-me.

Figure 10 shows the HTML in Internet Explorer.



Figure 10. Using CLASS attributes.

In the sample HTML, two tags and one tag had the CLASS attribute with the bold-me value. As expected, only the list items were bolded. What if you wanted to make the tag bold as well? To change the CSS document to force all tags with the same CLASS attribute to take on the same formatting instructions, you simply remove the tag name. The following shows the updated CSS document:

h1 { font-family: Arial; font-size: 24pt; font-style: italic; text-align: center } p { font-family: Tahoma; font-size: 12pt } li { font-family: Tahoma; font-size: 9pt } .bold-me { font-weight: bold }

Figure 11 shows the result of using this new CSS document with the previous HTML document. In this case, both the tag and the two tags received the bold instructions.



Figure 11. Using a global CLASS reference.

The ID attribute works in the same fashion as the CLASS attribute except in two ways:

Instead of a dot (.) delimiting the tag from the value in the CSS document, a pound (#) is used.

The value of a CLASS attribute can be duplicated within the same HTML document, but with ID attributes the value must remain unique.

Grouping

CSS provides syntax to assist in the consolidation of your attribute settings. For example, the following CSS statements can be consolidated:

H1 {color: blue; background-color: red } H2 {color: blue; background-color: red } H3 {color: blue; background-color: red }

The consolidated statement is shown below:

H1, H2, H3 {color: blue; background-color: red }



It is also possible to consolidate the setting of font properties and margin properties. For example, the following CSS statements can also be consolidated:

H1 { font-family: courier; font-size: 10pt; font-weight: bold; font-style: normal } H2 { margin-top: 1in; margin-right: 2in; margin-top: 3in}

The consolidated statements are shown below;

H1 { font: bold normal 10pt courier } H2 { margin: 1in 2in 3in }

NOTE In both of these examples, the order is specific. Please consult the CSS specifications relating to the order and what attributes can be grouped in this fashion.

WARNING! Be sure to use spaces to delimit each of your settings. The use of a comma will create unpredictable results.



Summary Cascading Style Sheets (CSS) allow you to centralize all formatting

instructions either at the top of the HTML document or in a separate text document.

A CSS document is made up of selectors and declarations.

In-line styles are CSS formatting instructions embedded directly in the HTML tag.

Embedded styles use the tag to centralize all the CSS formatting instructions at the top of the HTML document.

Linked styles use the tag to instruct the browser as to the location of the external CSS document.

CSS has many attributes to control fonts, color, positioning, and more.

The and tags allow you to define your own content.



(Review questions and answers on the following pages.)



Questions 1. Name the three ways to employ CSS styles on a Web page.

2. Which attribute is used by an HTML tag to implement in-line styles?

3. Which tag contains the CSS instructions when using embedded styles?

4. Which tag is used to reference an external CSS document?

5. Create a CSS instruction that sets all H1 tags to bold.

6. Name the two ways in which a tag can be positioned using the position attribute in CSS.



Answers 1. Name the three ways to employ CSS styles on a Web page.

In-line, Embedded, and Linked

2. Which attribute is used by an HTML tag to implement in-line styles? STYLE

3. Which tag contains the CSS instructions when using embedded styles?

4. Which tag is used to reference an external CSS document?

5. Create a CSS instruction that sets all H1 tags to bold. H1 { font-weight: bold }

6. Name the two ways in which a tag can be positioned using the position attribute in CSS. Absolute and Relative



Lab 7: Cascading Style

Sheets

TIP: Because this lab includes a great deal of typed code, weve tried to make it simpler for you. Youll find all the code in CSS.TXT, in the same directory as the sample project. To avoid typing the code, you can cut/paste it from the text file instead.

Lab 7: Cascading Style Sheets


Lab 7 Overview In this lab youll learn to use Cascading Style Sheets to perform basic formatting and positioning of elements of your Web page.

To complete this lab, youll need to work through two exercises:

Use CSS for Text Formatting

Use CSS for Positioning

Each exercise includes an Objective section that describes the purpose of the exercise. You are encouraged to try to complete the exercise from the information given in the Objective section. If you require more information to complete the exercise, the Objective section is followed by detailed step-by-step instructions.




Objective

In this exercise, youll use a pre-existing HTML document and make the page more eye-catching and easier to use for the user. The document you will update uses frames that are comprised of two columns. The left column is a menu bar and the right column will represent the main content of the Web site.

The frameset document is called CSS.HTM. Figure 12 shows this HTML document in Internet Explorer.

Figure 12. CSS.HTM without Cascading Style Sheets.

Your task is to add embedded Cascading Style Sheets to PAGE1.HTM (the left menu) that will perform the changes as shown in Table 9. You will see some new syntax in the table. Check out Things to Consider for more information.

Tag Formatting

H3 Set the font face to Verdana and the font color to red.

A Set the font face to Arial, the size to 10 point, and remove the underline created by the anchor tag.

A:link, A:visited Set the color to blue.

A:hover Set the color to red and the font weight to bold.

A:active Set the color to dark red and the font weight to bold. Table 9 .Formatting instructions needed to complete the exercise.



Figure 13 shows the page after the formatting instructions have been added. Notice that the font changes when the mouse hovers over the hyperlink.

Figure 13. The Web page after the added CSS instructions.

Things to Consider

The A:link and A:hover are called pseudo-elements. They are called this because they are not true selectors. Rather, they are selectors that have a filter applied to them. A:link refers to an tag, but only when it is an unvisited link. A:hover refers to an tag, but only when the mouse hovers above it. CSS has a number of pseudo-elements that you can use to get even greater control when assigning CSS instructions.

For embedded style sheets, you must use the tag and place the instructions in the header of the HTML document.

To remove the underline on the tags, use the text-decoration property and set it to none.

Step-by-Step Instructions

1. Load Microsoft Notepad by clicking Start|Run. In the Open textbox in the Run dialog box, type Notepad and click OK.

2. Click File|Open and locate the labs chapter directory.

3. Select the file PAGE1.HTM and click Open.



4. Start your updates by adding the tags to the HTML document. These should reside in the header portion of the document. The top half of your document after the tags are added is shown below:

Menu Page

5. The CSS formatting instructions go between the opening and closing tags. First, add the CSS instruction to format the tag. Your code should look like the following:

Menu Page

H3 { font-family: Verdana; color: red }

MENU

Page 2 Page 3 Page 4 Page 5

6. Click File|Save.

7. Load Internet Explorer by clicking Start|Run and entering IEXPLORE. Then click OK.



8. Enter the full path and file name for CSS.HTM in the Address text box and press ENTER. Figure 14 shows the result you should see.

Figure 14. The Web page with the tag formatted.

9. Press ALT+TAB and set the focus back to Notepad.

10. Now, add the appropriate CSS instructions for all tags. Your code should look like the following:

Menu Page

H3 { font-family: Verdana; color: red } A { font-family: Arial; font-size: 10pt; text-decoration:none }

11. At this point, you may save your work and view the HTML document as it stands at this point. Otherwise, continue and finish the rest of the CSS formatting.

12. Add the pseudo-elements to control the behavior of the tag when the user activates the hyperlink. Your code should look like the following:



Menu Page

H3 { font-family: Verdana; color: red } A { font-family: Arial; font-size: 10pt; text-decoration:none } A:link { color: blue; font-weight: normal } A:visited { color: blue; font-weight: normal } A:hover { color: red; font-weight: bold } A:active { color: darkred; font-weight: bold }

MENU

Page 2 Page 3 Page 4 Page 5

13. Click File|Save.

14. Press ALT+TAB to shift the focus to Internet Explorer.

15. Press F5 to reload the CSS.HTM document. Test out the hyperlinks and notice the behavior. Your completed document should look like Figure 15.



Figure 15. The completed CSS exercise.




Objective

In this exercise, youll use Cascading Style Sheets to position identical tags to create a shadow effect as well as substitute your own graphic to use in the bullet list.

This exercise focuses on the PAGE2.HTM. Update this page to include the following text instead of the Page 2 text:

TThhrreeee IInntteerrnneett bbrroowwsseerrss::

Microsoft Internet Explorer

Netscape Navigator

Opera

The first line should be shadowed using CSS positioning while the bullet list uses the HAND.GIF image included in your labs chapter directory. Figure 16 shows the Web page in its completed form.

Figure 16. The Web page using CSS to create shadows and bullet images.

In this example, all the fonts are Verdana. The opening line is an and the bullet list is an unordered list.



Things to Consider

To create the shadow, you need to create two identical tags.

To assign different CSS instructions to the same tag, use the CLASS attribute.

The CSS property to change the bullet image is list-style-image and the value is typically url(filename).

For proper placement of text, both the and bullet list were positioned absolutely.

Step-by-Step Instructions

1. Press the ALT+TAB keys to shift the focus back to Notepad. (If you closed Notepad since the previous section, load Notepad by clicking Start|Run and entering Notepad.)

2. Click File|Open and locate PAGE2.HTM in the labs chapter directory.

3. To start, remove the and its content from the document.

4. Then add the appropriate text so that it looks like what follows:

Page 2 Three Internet browsers: Three Internet browsers:

Microsoft Internet Explorer Netscape Navigator Opera

5. Click File|Save.

6. Press ALT+TAB to shift the focus over to Internet Explorer.



7. Load CSS.HTM. You should see the result in Figure 17.

Figure 17. The Web page with the appropriate text.

8. The page is not very pretty because you havent used CSS. Now add the tags to the header.

9. For the , you need to create two lists of instructions. To differentiate between the two tags, add two CLASS attributes as shown below:

Three Internet browsers: Three Internet browsers:

10. In the tag, add the following instructions for the :

H3.text { font-family=Verdana; position:absolute; top:30px; left:30px; color:white} H3.shadow { font-family=Verdana; position:absolute; top:29px; left:29px; color:black}


12. Press ALT+TAB to shift the focus to Internet Explorer and press F5. Figure 18 shows the result.



Figure 18. The Web page with the shadow text.

13. The shadow is working, but the bullet list went North. To fix this, update the style sheet and add the following to move the bullet list back down.

UL { font-family=Verdana; position:absolute; top:65px; left:30px}


15. Press ALT+TAB to shift the focus to Internet Explorer and press F5. Now the page looks much better!

16. Now it is time to add the graphical bullets. Add the following CSS instruction to the style sheet to load the HAND.GIF to use with the bullet list:

LI { list-style-image:url("hand.gif") }


18. Press ALT+TAB to shift the focus to Internet Explorer and press F5. Figure 19 shows the result you should see.



Figure 19. The completed Web page.

19. What do you suppose the page looks like in Netscape Navigator? Try loading Navigator and see what happens when you view this page. Figure 20 uses Netscape Navigator 4.75.

Figure 20. The Web page in Netscape Navigator 4.75.

As you can quickly see, Cascading Style Sheets is not an exact science. Internet Explorer, Netscape Navigator, and Opera all have their own level of support. In almost all situations it is important to rigorously test your page against multiple browsers if you intend to reach a broad audience.

For completeness, Figure 21 shows how Opera 4.02 faired in the test as well.



Figure 21. The Web page in Opera 4.02.

Cascading Style Sheets7.1 Cascading Style Sheets OverviewWhat Is CSS?CSS Level 1CSS Level 2Browser Support

7.2 Using Style SheetsIn-Line StylesEmbedded Style SheetsLinked Style SheetsCombining Style Sheets

7.3 Formatting and LayoutFont Attributesfont-familyfont-stylefont-variantfont-weightfont-sizetext-decoration

Color AttributesMargins and AlignmentPositioningRelative PositioningAbsolute Positioning

7.4 Advanced Techniques and Classes and IDsGrouping

Lab 7: Cascading Style SheetsLab 7 OverviewUse CSS for Text FormattingThings to Consider

Use CSS for PositioningThings to Consider

ch07

Documents

css level

cascading style sheets

cascading style sheets

css standard

purpose of css

css specifications

multiple css documents

html markup