1. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 1 New Perspectives on Creating Web Pages with HTML Tutorial 7: Working with Cascading Style Sheets

2. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 2 Tutorial Objectives Learn about the history and theory of cascading style sheets Create inline styles, embedded styles, and style sheets Understand style precedence and style inheritance Use cascading style sheets to format paragraphs, lists, and headings

3. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 3 Tutorial Objectives Continued Design a style for hyertext links in their four conditions Define document content with the class and id attributes and create styles for them Mark document content with the and tags and create styles for them Use cascading styles to design page layout

4. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 4 HTML and Page Layout Early versions of HTML had little support for Web page design. The philosophy was to: –use basic text files that could be quickly downloaded –rely on Web browsers to format the document’s appearance The simplicity of HTML tags made creating Web pages easier and made pages load faster.

5. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 5 HTML and Page Layout Web authors looked for ways to deliver more visually interesting documents. This has been done chiefly in three ways: –using HTML tag extensions –converting text to images –controlling page layout with tables

6. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 6 HTML and Page Layout Upside HTML tag extensions: Provide the Web author with more choices in layout and design. Converting text to images: Don’t have to worry whether a browser will support a particular font. Place in specific locations on the Web page. Tables: Use as a layout tool.

7. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 7 HTML tag extensions: Not all browsers support the various tag extensions. Converting text to images: You are limited in the number of inline images you can use and still have the page downloaded in a timely fashion. Moreover, it’s difficult to make quick changes to the page’s content if you have to edit the inline graphics first. Tables: This makes the HTML files more complicated to write and to interpret. HTML and Page Layout Downside

8. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 8 History and Support of CSS One principle of design theory is to separate the content of a document from its design. A style defines the appearance of a document element. The collection of styles for a Web page or Website is known as a style sheet. Style sheets use a common language and syntax. The main style sheet standard is Cascading Style Sheets (CSS).

9. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 9 Cascading Style Sheets (CSS) Like HTML, style sheets must use a common language and follow common rules. This language is known as Cascading Style Sheets, or more simply, CSS. CSS has been developed by the WWW Consortium (www.w3c.org), the same organization that develops standards for HTML. CSS is designed to augment HTML, not replace it. CSS is a whole new way of formatting Web pages. CSS provides several tools not available with standard HTML.

10. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 10 CSS Versions CSS1 was released in 1996. CSS2 was released in 1998. CSS3, the latest standard is being developed.

11. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 11 Browser support for CSS has proven to be uneven. Internet Explorer –Internet Explorer 4.0 provides support for CSS1 standard. –Internet Explorer 5.0 provides the best support for CSS1, there are still buys in the implementation of Internet Explorer. Netscape –Netscape’s support for CSS1 has been spotty. –Netscape has been pushing their own style sheet language over CSS. –Netscape is not considered CSS1-compliant, However, Netscape 5.0 may end up supporting CSS1. Browser Support for CSS

12. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 12 Benefits of Style Sheets Use as a design tool. Makes website more flexible. Easier to maintain and modify. More aesthetically interesting. Consistent look.

13. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 13 Web Sites with Information on Cascading Style Sheets This figure displays websites that provide more information about the compliance of browsers with CSS1 and CSS2, and for information about the standards themselves.

14. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 14 Style Types There are three ways of employing CSS in Web pages: –inline styles in which styles are added to each tag within the HTML file. The style affects that particular tag but does not affect other tags in the document. –embedded or global styles applied to an entire HTML file, allowing the Web designer to modify the appearance of any tag in the document. –linked or external style sheets placed in an external file and linked with pages in the Web site, allowing the Web designer to modify the appearance of tags in several documents Which approach you choose depends on the Web site’s design..

15. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 15 Using Inline Styles If you need to format a single section in a Web page, you’d probably use an inline style. To create in inline style, add the style attribute to the HTML tag using the following syntax: –tag is the name of the tag (h1, h2, etc) –style declarations are the styles you’ll define for a particular tag –style declaration must be enclosed within double quotation marks

16. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 16 A Style Declaration A style declaration consists of attribute names that specify such features as: –font size –color –font type Attributes are followed by a colon and then the value of the attribute. Multiple attributes can be used as long as you separate each one by a semicolon. The general syntax for the style declaration is: attribute1:value1; attribute2:value2;

17. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 17 Inserting an Inline Style This figure shows how to insert an inline style.

18. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 18 Heading with New Style This figure shows the heading with the new style.

19. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 19 Creating an Embedded Style An embedded style is a style applied to various sections within a Web page. Insert a tag within the head section of the HTML file. Within the tag, enclose the style declarations needed for the entire Web page. The syntax of an embedded style is: style declarations –style sheet language identifies the type of style language used in the document –The default, is “text/css” for use with CSS

20. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 20 Selectors and Declarations Style declaration within the tags obey the following syntax: selector {attribute1:value1; attribute2;value2;...} –selector identifies an element in your document, such as a heading or paragraph, and the attributes and values within the curly braces indicate the styles applied to all the occurrences of that element –this collection of attributes and values is also referred to as the declaration of the selector

21. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 21 Selectors and Declarations Continued For example, to display all h1 headings in the HTML document using a gold sans-serif font, use the following embedded style: h1 {color: gold; font-family: sans- serif} –h1 is the selector and the text enclosed in the braces is the declaration

22. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 22 Defining a Global Style The type attribute was not included within the tag. This is because “text/css” is the default style language, and unless you specify a different style language, you don’t need to enter the type attribute. When using the tags, you don’t need to include double quotes around the attributes and attribute values.

23. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 23 Grouping Selectors You can apply the same declaration to a group of selectors by including all of the selector names separated by commas. The following is a sample style declaration to format all headings in a gold sans-serif font: h1, h2, h3, h4, h5, h6 {color:gold; font- family:sans-serif}

24. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 24 The Same Style Applied to Two Headings Even though the same style is used for all heading tags, there are still some differences in how the browser displayed text formatted with these tags. Most notably, the styles did not affect the relative sizes of the text. Text formatted with the tag is still larger than text formatted in the tag. This is because the size of the heading text was not defined, so that attribute is left to the browser.

25. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 25 Using an External Style Sheet Create styles that apply to an entire Web site by creating a text file containing style declarations. Most style sheets have the extension “.css”, though this is not a requirement. Within a style sheet, you don’t need tags, just the style declarations.

26. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 26 Linking to Style Sheets with the Tag Use the tag to link Web pages to a style sheet. The general syntax for using the tag is as follows: –URL is the URL of the linked document –relation_type establishes the relationship between the linked document and the Web page –link_type indicates the language used in the linked document In order to link to a style sheet, the value of the rel attribute should be “stylesheet” and the value of the type attribute should be “text/css”. To link to a style sheet named “mws.css,” the tag would be:

27. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 27 Linking to Style Sheets with @import Another way to link to a style sheet is to use the @import command, which accesses the style sheet definitions from another file. To use @import with styles, enclose the @import command within the embedded tags as follows: @import url(stylesheet.css); style declarations –stylesheet.css is the URL of the style sheet file

28. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 28 The @import Command The @import command provides greater flexibility than the tag when working with multiple style sheets. The @import command has limited browser support. Unless you have a compelling reason to use @import, you are probably better off using the tag.

29. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 29 Resolving Style Precedence In cases where the styles conflict, precedence is determined in the following order: –an inline style overrides any embedded style or external style sheet –an embedded style overrides an external style sheet –an external style sheet overrides the internal style rules set by the Web browser –any style attributes left undefined by an inline style, an embedded style, or an external style sheet are left to the Web browser

30. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 30 Changing Styles As a change is made to a style at one level, the changes are cascaded through to the other levels (hence the term, cascading style sheets). Where a different font has not been specified, changes will cascaded through the embedded and inline styles. As you define more styles for a Web site, you need to keep track of the inline, embedded, and external style sheets to correctly predict the impact that style changes have on the appearance of each page.

31. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 31 Working with Style Inheritance Web pages invariably have elements placed within other elements. –for example, a Web page might have a bold tag,, placed within a paragraph tag,, to create boldface text within the paragraph. The paragraph tag is likewise placed within the tag.

32. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 32 Sample Tree Structure of HTML Elements This figure displays the HTML element relationship using a tree diagram.

33. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 33 Parent and Descendant Elements An element that lies within another element is called a descendant or descendant element. An element that contains another element is called the parent or parent element. An example of a parent is the tag, which contains all of the other tags used to format the content of a Web page. Using the principle of inheritance, styles defined for each parent tag are transferred to its descendants.

34. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 34 Contextual Selectors Use the tree structure concept to better control how styles are applied to a Web page. CSS provides ways of fine-tuning the context in which the selector is applied. –if you want to apply a style only to the direct descendant of a parent element, use the syntax: e1 > e2 –el and e2 are the names of HTML elements and e2 is directly below the e1 in the hierarchy of elements in the document –for example: li > b {color:blue}

35. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 35 Contextual Selectors Continued Not all browsers support contextual selectors Always test Web page using various browsers and browser versions.

36. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 36 Using Font Families The font-family attribute allows you to choose a font face for use in Web pages. CSS works with two types of font faces: –a specific font, which is a font such as Arial, Garamond, or Times New Roman that is actually installed on a user’s computer. –a generic font, which is a general description of a font, allowing the operating system to determine which installed font best matches it. CSS supports five generic font types: serif, sans-serif, monospace, cursive, and fantasy.

37. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 37 Generic Fonts This figure shows examples of each generic type. For each generic font there can be a wide range of designs.

38. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 38 Generic and Specific Fonts One issue with generic fonts is that you cannot be sure which specific font the Web browser uses to display your text. Whenever possible, it is a good idea to use specific fonts. Provide the Web browser with several fonts to choose from. Browsers that don’t have access to the font you specified as your first choice may have your second or third choice available. List specific font names first, followed by a generic font name for the browser to use if none of the specific fonts can be found.

39. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 39 Managing Font Size The tag can format address information on a Web page. –by default, text formatted with the tag is displayed in normal-sized type, italicized, and aligned with the left edge of the Web page. A common method for specifying font sizes with HTML is to use the size attribute of the tag. The size attribute limits you to only seven font sizes. Browsers can display font sizes quite differently.

40. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 40 Managing Font Size Continued In CSS, you use the font-size attribute to manage font sizes. Font sizes can be expressed: –as a unit of length –with a keyword description –as a percentage of the parent element –with a keyword expressing the size relative to the font size of the parent element

41. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 41 Absolute and Relative Units If you choose to express size as a unit of length, you can use absolute units or relative units. –absolute units define the font size based on one of the following standard units of measurement: mm (millimeter), cm (centimeter), in (inch), pt (point), and pc (pica). –use a relative unit, which expresses the font size relative to a size of a standard character. There are two standard typesetting characters, referred to as “em” and “ex.” –the em unit is equal to the width of the capital letter “M” in the browser’s default font size –the ex unit is equal to the height of a small “x” in the default font

42. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 42 The EM and EX Units The em unit is more useful for page design, because 1 em is equal to the browser’s default font size for body text. This is true no matter what font is being used (unlike the ex unit, whose size changes based on the font face being used).

43. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 43 The EM and EX Units As with absolute units, you can specify factional values for the em and ex units. Unlike the absolute units, em and ex units are scalable in that they retain their relative proportions regardless of the monitor size or resolution.

44. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 44 Pixels Pixels give you the greatest control over size. A pixel is the smallest element recognized by the monitor. Pixels should be used with some caution. Text that is 10 pixels high may be perfectly readable at a monitor resolution of 640 x 480, but it can become unreadable if the monitor is set to 1024 x 768.

45. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 45 Descriptive Keywords If you are uncomfortable dealing with units of length, you can use one of the seven descriptive keywords: –xx-small –x-small –small –medium –large –x-large –xx-large These keywords correspond to the seven values of the size attribute in the tag.

46. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 46 Expressing Font Size as a Percentage of the Parent Tag This figure shows the impact of such a style definition on boldface text in a Web page. The style has the same impact within a heading, since the heading is the parent element, and the boldface text is increased to 150% of the surrounding heading text.

47. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 47 Express a Font Size using Keywords Express a font size using the keywords “larger” and “smaller,” which makes the font one size larger or smaller than the size of the parent element. –for example, to make the h2 heading one size larger than the body text, you could use the following style: body {font-size: medium} h2 {font-size: larger}

48. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 48 Specifying Word, Letter, and Line Spacing Use CSS font attributes to control the spacing between letters, words, and lines of text. To set the space between individual letters, you use the letter-spacing attribute, with the syntax: letter-spacing: size –size can either have the value “normal”, which allows the browser to determine the letter spacing based on the font being used, or a number expressed in the same measuring units used to describe font size (inches, millimeters, centimeters, em units, etc.)

49. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 49 Specifying Word, Letter, and Line Spacing Continued Another technique to change the spacing between individual words is the word-spacing attribute, with the syntax: word-spacing: size –size is either equal to “normal,” to allow the browser to set the word spacing, or to a specific length using the standard units of measure Use the line-height attribute to modify the vertical space between lines of text. Graphic designers may know this spacing as leading. The line-height attribute specifies the minimum distance between the baselines of adjacent lines.

50. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 50 Comparison of Line Height to Font Size This figure shows how the line height relates to the font size. The line height is usually larger than the font size to leave additional space between lines of text.

51. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 51 Line Height To set the line height, use the style: line-height: size –size is either a specific length, a percentage of the font size, or a number representing the ratio of the line height to the font size –the standard ratio is 1.2, which means that the line height is 1.2 times the font size –to make paragraphs double-spaced use the style definition p {line-height: 2}

52. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 52 A Title with a Large Font Size and Small Line Height A common typographic technique is to create titles with large fonts and small line heights. This figure shows an example where the line height is actually smaller than the font size. This treatment can give the title greater impact than it would have with more space between the two lines.

53. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 53 Setting Font Styles and Weights Font styles are controlled by the font-style attribute. The font-style attribute has three possible values: normal, italic, or oblique. The italic and oblique styles are similar in appearance though there can be small differences depending on the font. Versions of Netscape prior to 6.0 do not support the oblique attribute value.

54. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 54 Font Weights CSS considers “bold” to be an aspect of the font’s weight, or line thickness. Font weights can be expressed as an absolute number ranging in intervals of 100, going from 100 (the lightest) up to 900 (the heaviest or “most bold”). For most fonts, you can assume that: –a weight of 400 corresponds to normal text –a weight of 700 can be used for bold text –a weight of 900 for “extra” bold text

55. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 55 Font Weights Continued Use the keywords “normal” and “bold” in place of a weight value. Express the font weight relative to the parent tag by using the keywords “bolder” or “lighter.” Use the CSS bolder attribute to get bolder text: h2 {font-weight: 700} b {font-weight: bolder} If these style definitions are applied to a Web page, h2 text formatted with the tag will be bolder or thicker in appearance than the surrounding heading text.

56. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 56 Aligning Text Horizontally and Vertically Use the text-align attribute to left, center, right or justify text. To do this with CSS, use the text-align attribute: text-align: alignment –alignment can be left, center, right, or justify –setting the text-align value to “justify” stretches the text, extending it from the left to the right margin –some browsers will ignore the text-align attribute value

57. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 57 Applying the Center Text-Align Style This figure shows how to apply the center text-align style.

58. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 58 Vertically Align Elements CSS allows you to vertically align elements such as text and images relative to the surrounding text. The syntax for setting the vertical alignment is: vertical-align: alignment –alignment has one of the keyword values

59. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 59 Values of the Vertical Alignment Attribute This figure shows the alignment keyword values.

60. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 60 Examples of the Vertical Alignment Values This figure shows an example of each vertical-align value. Baseline is the default value for vertical alignment.

61. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 61 Indenting Text CSS allows you to indent the first line of a paragraph. The syntax for creating an indentation is: text-indent: indentation –indentation is either the length, in either absolute or relative units, of the indentation or a percentage of the width of the paragraph

62. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 62 Hanging Indent The length and percentage values also can be negative, which extends the first line to the left by the specified value or percentage, and then indents the rest of the lines in the paragraph. This particular effect, called a hanging indent, works sporadically on many browsers.

63. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 63 Special Text Attributes CSS provides three attributes for special text effects: –text-decoration –text-transform –font-variant

64. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 64 Values of the Text-Decorating Attribute This figure shows the text-decoration attribute can be used to underline your text or place a line over or through your text. You can also make your text blink on and off using the text-decoration: blink attribute.

65. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 65 The Text-Transform Attribute The text-transform attribute can be used to: –capitalize the first letter of each word in a paragraph –display the text in all capital letters –display the text in all lowercase letters

66. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 66 Values of the Text-Transform Attribute This figure shows the effect of the various text-transform values.

67. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 67 The Font-Variant Command Use the font-variant command to create small caps. Small caps are capital letters that are the same size as lowercase letters. The syntax for the font-variant attribute is: font-variant: small-caps Netscape does not support the font-variant attribute in versions prior to 6.0.

68. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 68 Values of the Font-Variant Attribute This figure shows values of the font-variant attribute.

69. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 69 The font Attribute The font attribute provides an efficient way for you to define multiple attributes. The syntax for the font attribute is: font: font-style; font-variant; font-weight; font-size/line-height; font-family –font-style, font-variant, and so forth are the values for font and text style attributes The font attribute requires that you specify the font size, font variant, and font weight. If a font attribute is not included, the browser assigns the normal or standard value for the element.

70. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 70 The color Attribute CSS works with most of the color names supported by HTML. Another way to specify color in CSS is to use RGB color values. You can enter the hexadecimal form of the color value or the RGB color values directly. –for example, to change the body text color to teal, use any of the following styles: body {color:teal} body {color: #008080} body {color: rgb (0,128,128)} body {color: rgb (0%, 50%, 50%}

71. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 71 Changing the Color of the H1-H6 Headings RGB color values range from 0 to 255, so specifying a color percentage of 50% for green and blue is close to a color value of 128. This figure shows an example of changing the color of the H1-H6 headings.

72. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 72 Working with Background Color By default, elements take on the background color of their parent element. To change the background color of almost any element, use the background-color style.

73. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 73 Applying a Background Color This figure shows how to apply a background color.

74. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 74 Working with Background Images Almost any element on the page can also be displayed with its own background image. The background image has four attributes: –the source of the image file –how the image is repeated in the background –where the image is placed on the background –whether the image scrolls with the display window To specify which file to use for a background, use the syntax: background-image: url(URL) –URL is the location of the image file

75. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 75 Applying a Background Image to an Element This figure demonstrates how you can apply this style to the tag to create an interesting design for a section of boldface text.

76. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 76 Working with Background Images Continued By default, background images are tiled both horizontally and vertically behind the element until the entire element is filled. Control the way the tiling occurs using the background-repeat style attribute. The background-repeat attribute has four possible values.

77. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 77 Values of the Background-Repeat Attribute This figure shows the background-repeat attributes four possible values.

78. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 78 Examples of the Background-Repeat Values This figure shows examples of each background-repeat values.

79. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 79 The Background-Position Attribute Background images are placed in the upper-left corner of their element, and then repeated (if tiling is being used) from there. You can move the background image to a different location using the background-position style attribute. The background-position attribute has two values: –the first indicates the distance from the left edge of the element –the second indicates the distance from the element’s top edge These values can be expressed as a percentage of the display area, in units of length, or with keywords.

80. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 80 Background-Position Keywords and Percentages This figure shows how background-position keywords relate to the percentage values.

81. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 81 The Background-Attachment Attribute By default, background images move along with the background of the page as the user scrolls through the Web page. To change the movement of background images, use the background-attachment attribute. The syntax of this style is: background-attachment: attach –attached is either “scroll,” to scroll the image along with the element, or “fixed,” which places the image in a fixed place in the browser’s display window, preventing it from moving even if the user scrolls down through the Web page The background-attachment attribute is not supported by Netscape prior to version 6.0.

82. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 82 Background Images Fixed background images are often used to create the impression of a watermark. –a watermark is a term that refers to a translucent graphic impressed into the very fabric of the paper and used in specialized stationery If you use a background image that employs a transparent color, you can combine the background-color and background-image attributes to create a new image. –for example, the style: body {background-color: yellow; background- image: url(logo.gif)} -- displays logo.gif on the background, and anywhere that a transparent color appears in the logo the background color yellow will shine through

83. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 83 The Background Attribute You can combine all of the various attributes for backgrounds into one attribute, called the background attribute. The syntax for the background attribute is: background: background-color background-image background-repeat background-attachment background position –background-color, background-image, etc., are the values for the various background attributes

84. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 84 Using the Background Style Attribute This figure shows an example of the background style attribute.

85. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 85 Working with List Styles CSS provides more control over the appearance and behavior of ordered, unordered, and definition lists than does HTML. CSS allows you to specify the types of labels attached to list items and how to position the labels with respect to the label text. The list-style-type attribute allows you to choose the type of label to display alongside text formatted with the,, or tags.

86. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 86 Values of the List-Style-Type Attribute This figure shows the possible values of the list-style-type attribute.

87. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 87 Creating a Nested Outline Style Use contextual selectors to create an outline style for several levels of nested lists. This figure shows a set of contextual selectors used to create an outline style for different outline levels.

88. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 88 Using a list-style-image Attribute You can create a label, not included in the list-style-type values, with an image file and the list-style-image attribute. The syntax for applying this attribute is: list-style-image: url(URL) –URL is the location and the filename of the image file The list-style-image attribute is not supported by Netscape version 4.7 or earlier. It’s a good idea to include the list-style-type attribute along with the list-style-image attribute.

89. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 89 Defining the List Style Position List items are treated by CSS as if they have an invisible box around them. The syntax for specifying the location of the list item label is: list-style-position: location –location is either “inside” or the default value, “outside.”

90. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 90 Defining the Position of the List Label This figure shows that the labels for the list items can be placed either outside or inside the box.

91. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 91 The list-style Attribute You can combine all of these attributes into the list-style attribute. The syntax for this style is: list-style: list-style-type list-style- image list-style-position –list-style-type, list-style-image, and list-style-position are the attribute values for each of the individual list style attributes

92. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 92 Defining the Appearance of a List Label This figure shows how to define the appearance of a list label.

93. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 93 Formatting Hypertext Links Hypertext has an additional attribute that normal text doesn’t have: the condition of the hypertext link itself. A hypertext link can be in one of four states: –the link’s target has already been visited by the user –the link’s target has never been visited by the user –the link is currently being clicked by the user –the user’s mouse pointer is hovering over the link Web browsers provide a visual clue for each of these states, such as a different color for visited links, and a different shape for the pointer when it is hovering over a link.

94. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 94 Formatting Hypertext Links Continued CSS provides a different selector for each condition. The general syntax is: a:visited {styles for previously visited targets} a:link {styles for targets that have never been visited} a:active {styles for links that are currently being clicked} a:hover {styles when the mouse cursor is hovering over the link} - this is called a rollover effect You can use a variety of CSS attributes to create a different style for each condition. –for example, to change the color of previously visited targets to red, use the style: a:visited {color:red}

95. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 95 Creating a Rollover Effect This figure shows the rollover effect.

96. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 96 Working with ids and Classes A pseudo-class is a classification of an element based on its status or its use. –in the example of the rollover effect, the status was the condition of the hypertext link –the element itself, a hypertext link with the pointer located over it, is called a pseudo-element CSS introduces additional pseudo-classes, including the first-line pseudo-class and the first-letter pseudo-class, which are used for formatting the first line and first letter of a block of text, respectively.

97. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 97 Applying a Style to a Pseudo-Class This figure shows how to apply a style to a pseudo-class and what it would like in the browser.

98. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 98 The class Attribute Many browsers do not support the first-letter and first-line pseudo-classes yet. The only pseudo-classes widely supported are the four hypertext link conditions. You can create customized classes by adding the class attribute to HTML tags. The syntax for creating a class is: –tag is the HTML tag –class_name is the name of the class

99. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 99 Applying a Style to a Pseudo-Class This figure demonstrates creating an inline style for the h1 heading with the class name “First Header.” This technique is useful when you have multiple Web pages in which you want the first heading in each page to be formatted in the same way.

100. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 100 The id Attribute Closely related to the class attribute is the id attribute, which applies an id to a specific element in the document. The id attribute must be unique; there can not be more than one tag with the same id value. The syntax for creating an id is: –tag is the HTML tag –id_name is an id name assigned to the tag The class and id attribute are useful HTML features to use with CSS to define styles for specific content without using inline styles.

101. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 101 Creating a Class for Monthly Specials This figure shows how to create a class for monthly specials.

102. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 102 Working with Container Elements HTML supports two types of container types: –the tag, which is used to contain inline elements such as individual letters, words, phrases, or inline images –the tag, which is used to group blocks of text such as paragraphs, block quotes, headings, or lists. Collectively, these text blocks are known as block-level elements

103. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 103 Using the Tag This figure shows an example in which a heading and a paragraph have been enclosed in a container. The tag does not actually format the block-level elements; it merely groups them as a unit. For this reason, the tag always includes either a class or id attribute that identifies that group.

104. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 104 Using the and Tags This figure shows an example of how the tag can be used to format a selection of text within a paragraph. A tag is used to format the entire paragraph. You almost always include an id or class attribute with the tag.

105. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 105 Formatting Block-Level Element Boxes With CSS, you can control the layout of a Web page by manipulating the size and location of block-level elements. CSS treats all block-level elements as a group. HTML tags that can be treated as block-level elements are: – - tags – tag – and tags –,, and list tags –,, or tags (individual list items) – tag

106. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 106 Parts of the Block-Level Element Box There are three elements: –margin between the box and the parent element –border of the box –padding, which is the space between the box around the block-level element and the border CSS provides attributes you can use to control the appearance and behavior of each of these elements.

107. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 107 Features of the Box Around a Block-Level Element This figure shows features of the box around a block-level element.

108. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 108 Some Block-Level Elements in a Web page. This figure shows some of the boxes in a Web page.

109. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 109 Controlling Margins The margin is the space between the block-level element and the parent element. There are four attributes that control the margin size: –margin-top - the space between the top of the box and the top margin –margin-right - the space between the right side of the box and the right margin –margin-bottom - the space between the bottom of the box and the bottom margin –margin-left - the space between the left side of the box and the left margin

110. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 110 Controlling Margins Continued Margin sizes can be expressed in units of length (points, pixels, em units, etc.) or as a percentage of the width of the parent element box. Use the “auto” value, which allows the browser to determine the margin size. A margin size can be negative, although this can lead to unpredictable results when viewed with certain browsers.

111. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 111 Creating an Overlay Effect Web page designers can use negative margins to place one block-line element on top of another, creating an “overlay” effect. This figure shows an example of an overlay effect.

112. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 112 Controlling Margins Continued The four margin attributes can be combined into a single attribute with the syntax: selector {margin-top margin-right margin-bottom margin-left} –if you only include three values in the combined attribute, they are applied in the following order: top, right, bottom, and the browser sets the left margin to match the right margin –if two values are specified, they are applied to the top and right margins, and the browser sets the bottom and left margins to match the top and right margins –if only one value is entered, the browser applies the value to all four margins

113. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 113 Setting Padding Size Padding refers to the amount of space between the element and its border. Four attributes are used to control the size of the element’s padding: –padding-top –padding-right –padding-bottom –padding-left

114. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 114 Formatting the Border CSS provides a variety of attributes for managing the box’s border width, border color, and border style. To combine all of the border attributes, use the syntax: border: border-width border-style border-color; These attributes can be applied to all four borders at once, or you can work with individual borders. There are a variety of ways with which border styles can be expressed. Support for the border declaration is inconsistent across browser types and versions.

115. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 115 Different Border Attributes The figure summarizes the various border attributes.

116. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 116 Example of Border-Style Values Border widths can be expressed using units of length or with the keywords thin, medium, or think. The border color can be defined using color names or color values. This figure shows that each of the nine different styles that can be applied to a border.

117. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 117 Formatting the Width and Height of Block-Level Boxes To change the width of a box, use the width attribute. Box width can be expressed in terms of absolute or relative units of length, or as a percentage of the width of the parent element. –for example, the style: body {width: 75%} –reduces the width of the Web page body to 75% of the width of the browser’s display area The width attribute is seldom used except with text boxes and inline images.

118. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 118 Formatting the Width and Height of Block-Level Boxes Continued The height attribute sets the height of the element. Heights can be expressed in absolute or relative lengths, but not percentages. Typically, you won’t set the height of a block-level element because problems can arise when the amount of text in the element exceeds the height allowed. The height attribute is usually applied to inline images and little else.

119. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 119 The float Attribute The float attribute works like the align=“left” or align=“right” attributes used with the tags. This attribute places the block-level element on the left or right margin of the parent element.

120. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 120 Floating a Block-Level Element This figure shows that when a browser encounters the float attribute, it moves the element over to whatever margin the Web author has specified and then brings the next block- level element up. The text in that element is wrapped around the floating element.

121. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 121 Using the clear Attribute Prevent other elements from wrapping around the floating element by adding the clear attribute to the element below the floating element. When the value of the clear attribute is set to “right,” the browser displays the element on the page at the point where the right margin is clear. Other possible values for the clear attribute are “left” and “both” (for both margins).

122. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 122 An Example Web site This figure shows an example Web site with the features discussed in this tutorial.

123. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 123 Tutorial 7 Summary Learned about the history and theory of style sheets. Covered the three types of style sheets: inline, embedded or global, and linked or external style sheets. Covered the syntax of style, describing selectors, attributes, and attribute values. Learned how to group selectors to apply the same style to multiple tags. Learned how a browser resolves style precedence and style inheritance.

124. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 124 Tutorial 7 Summary Continued Discussed parent and descendant elements and contextual selectors. Focused on applying different style attributes to Web page elements. Examined font and text attributes including word and letter spacing, font styles and weights, and text alignment. Learned how to apply color and background attributes. Covered the style attributes that can be applied to lists.

125. XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7 125 Tutorial 7 Summary Continued Learned how to apply styles to hypertext. Learned about pseudo-elements and pseudo-classes in order to create rollover effects (Internet Explorer only). Discussed general classes and id’s. Covered style attributes of all block-level elements.. Learned how to control the margin, padding, and border attributes of their block-level elements. Covered the float attribute to control the placement of a tag on the Web page.