Working with Cascading Style Sheets

1. Working with Cascading Style Sheets Maureen Smith Professor, Saddleback College Tutorial 3

2. Lesson Plan • Review • Tutorial 3 - Designing a Web Page • Session 3.1 • Session 3.2 • Session 3.3 • Review

3. Objectives • Learn how HTML handles colors and how to use colors effectively • Create foreground and background colors using styles • Select different font styles and designs using styles • Align text with surrounding content using styles

4. Control spacing between letters, words, and lines using styles • Learn about the different graphic formats supported on the Web and how to use them effectively • Understand how to use transparent images and animated graphics

5. Apply a background image to an element • Float an image on the right or left page margin • Set the margin size around an element • Understand image maps and how to use them • Create image map hotspots and link them to destination documents

6. Apply an image map to an inline image • Remove the border from a linked image

7. Session 3.1 • In this session you will create pages with color and a variety of images for the Sunny Acres web site

8. Introducing CSS • Sunny has already entered the content for 6 pages • Rename the data files • Click the links at the top of the home.htm file • Home page design needs work! • To apply a new design to this page and the other pages on the site, you’ll create a page design using style sheets

9. The History of CSS • A style sheet is a set of declarations describing the layout and appearance of a document • HTML doesn’t specify appearance • To create a document design, have to work in a different language • Most common one is the Cascading Style Sheetslanguge, known as CSS

10. The style attribute text is written in CSS • Specs for CSS are maintained by W3C • Several versions exist • CSS1—fonts, text, color, backgrounds, block-level elements • CSS2—positioning, visual formatting, media types, interfaces • CSS2.1—an update; no new features

11. CSS3—still in development; will add user interfaces, accessibility, columnar layout, international features, mobile devices, scalable vector graphics

12. Applying a Style Sheet • Can apply styles in 3 ways: • With inline styles • With an embedded style sheet • With an external style sheet • Advantages and disadvantages to each

13. Using Inline Styles • An inline style is applied directly to an element <h1 style=“text-align: center; color: red”>Sunny Acres</h1> • Easy to interpret because they are applied directly to the elements they affect • But can be cumbersome if you want all headings with the same style (could be hundreds)

14. Ideally, HTML code and CSS styles should be separate so one person could work on content and another on design • Not possible with inline styles

15. Using an Embedded Style Sheet • Power of style sheets becomes evident when you move style definitions away from the content • Collect all styles used in document in an embedded style sheet placed in head section <style type=“text/css”> h1 {text-align: center; color: red} </style> • All the h1 headings would be centered red text

16. Can apply same style to several elements by entering the elements in a comma-separated list before the list of properties <style type=“text/css”> h1, h2 {text-align: center; color: red} </style> • See tutorial3/home2.htm • If one of the elements have an inline style, it takes precedence over embedded style

17. Using an External Style Sheet • An embedded style sheet is limited to current document • Would have to repeat styles in head section of each document on a site; too cumbersome and prone to errors • Instead, can place style declarations in an external style sheet—a text file that contains style declarations

18. The file can then be linked to any or all pages on a site • Extension for CSS style sheets is .css • Looks like a list of embedded styles, except the style declarations are not enclosed within opening and closing style tags

19. Adding Style Comments • Style sheets can be as long and complicated as HTML files • Should use style sheet comments /* comment */ • CSS ignores white space so comments can be placed on several lines • Tammy has provided a text file with main structure of a style sheet already

20. See tutorial3/farm1.css • To apply this style, have to create a link between the home.htm file and the farm.css style sheet

21. Linking to an External Style Sheet • You create a link between Web pages and external style sheets using same link element learned in Tutorial 2 • Placed in head section <link href=“styles.css” rel=“stylesheet” type=“text/css” /> • Assume it is located in same folder!!! • See tutorial3/home2.htm

22. Setting up Alternate Style Sheets • Many browsers support alternative style sheets • Useful with users who have special needs such as for large text with highly contrasting colors • Browsers that support alternate style sheets provide a menu option for user to select which style sheet to apply • See Figure 3-7

23. Currently Netscape, Firefox, Opera, and Safari support alternate style sheets • IE only if a specialized add-in program is installed

24. Understanding Cascading Order • Consider a page linked to an external style sheet that sets all h1 elements in bold red • But there is also an inline style for one of the h1 elements specifying centered blue • And the browser specifies that all h1 elements are rendered in regular black that is not centered • Which style rule is ultimately applied to the page???

25. Style Precedence • Style precedence is the rule that determines which style is applied when one or more styles conflict • General rule is that the more specific style has precedence over the more general style • See Figure 3-8 and accompanying text

26. Style Inheritance • When there is no conflict, styles are passed down from more general to more specific in what is known as style inheritance • Any changes you make to a style sheet will automatically be passed down the levels of objects and elements • This cascade of style changes is the source of the term “cascading style sheets”

27. Working with Color in HTML and CSS • Let’s examine how to work with color • Usually easy due to the graphical interfaces graphics software employ • WYSIWYG allows you to select colors visually • With CSS you have to define colors in textual terms—either a color value or a color name

28. HTML identifies a color in one of two ways: • By the color’s name • By the color values • Advantages and disadvantages to both

29. Color Values • A color value is a numerical expression that precisely describes a color • To understand how HTML uses numbers to represent colors, must examine basic principles of color theory and how they relate to the colors your monitor displays • In classical theory, any color is a combination of three primary colors:

30. Red • Green • Blue • Figure 3-10 shows the colors yellow, magenta, cyan, and white that are produced by combining the three primary colors • By varying intensity of each primary color, can create any color and any shade of color that you want

31. This principle allows your monitor to combine pixels of red, green, and blue light to create the array of colors you see on your screen • Software programs, such as your browser, use a mathematical approach to define color • Intensity of each of the three primary colors is assigned a number from 0 (absence of color) to 255 (highest intensity)

32. In this way, more than 16.7 million distinct colors can be defined • Each color is represented by a triplet of numbers, called an RGB triplet, based on its Red, Green, and Blue components • White is 255,255,255 • Gray is 192,192,192 • Yellow is 255,255,0 (no blue) ???

33. In most programs, you are not aware of the underlying triplet when you make a color choice • It is these RGB triplets that you have to enter into your HTML code if you want to express the exact appearance of a color • HTML requires that these color values be entered as hexadecimals

34. A hexadecimal is a number that is represented using 16 as a base rather than 10 • Do you need to be a math wizard? • In practice, Web authors rely on several tools to generate hexadecimals • Could also use a converter program and look at the code generated

35. Using color names • There are 16 color names recognized by all versions of HTML, XHTML and CSS adds one • See Figure 3-11 • The list is fairly basic • As long as you keep to these simple colors, you can rely solely upon these color names to set up color schemes • Will be understood by all browsers

36. Great advantage is that you can be sure the colors you specify will be the colors viewers see on their computers • However, 17 colors is limiting • So most browsers support an extension of an additional 140 color names to this list • Figure 3-12 shows a partial list of additional color names • Gives greater color variation

37. Appendix A, “Color Names and Color Values,” is a fuller list • When you want more control and more choices, must use a color value

38. Defining Text and Background Colors • See Tip on p. 138 re color blindness • CSS supports styles to define text and background color for each element • Background-color: color • Use either a color value or color name

39. When you don’t define an element’s color, it takes the color of the element that contains it • Red text, gray background—all elements inherit that color combination unless you specify different styles for specific elements • Let’s change text color on Home page to a white background with heading text in white on dark green background

40. Most browsers assume a white background, but good to make it explicit • Add this style to external style sheet so you can eventually apply it to entire site • See tutorial3/home3.htm and tutorial3/farm2.css

41. How are you doing? • Deprecated approach to changing background and text color for page: <body bgcolor=“yellow” text=“#99CCFF”> • To color text in a section, can enclose text within a two-sided <font> tag

42. Working with Fonts and Text Styles • Now Tammy would like you to work with the appearance of the text • Right now is all in the same typeface • Let’s add variety Variety Variety Variety Variety

43. Choosing a Font • Default is a single font, usually Times New Roman • To change—use the style font-family: fonts • where fonts is a comma-separated list of fonts that the browser can use • Font names are specific or generic • A specific font is actually installed on the user’s computer

44. A generic font is a name for a general description of a font’s appearance • Browsers recognize 5 generic fonts: serif, sans-serif, monospace, cursive, fantasy • See Figure 3-16 • Cannot be sure which font a given user’s browser will use • So you specify a list of fonts, in order of preference

45. If the browser cannot find any of the specific fonts, it goes with the generic font-family: Arial, Helvetica, sans-serif • See a demo page on text styles in your Data files • Not good practice to use more than 2 different font faces on a page • Serif fonts are best for large blocks of text

46. Sans-serif for headings and subheads • Let’s use a sans-serif font for all body text in the farm.css external style sheet so it can be applied to all pages on the site • See tutorial3/farm3.css • Applies to all page elements because you applied it to the body element so it cascades through all elements on the page

47. Setting the Font Size • Tammy would like the Welcome heading to be displayed in larger text than rest of the page • font-size: length • where length is a measurement • with a unit of measurement • with a keyword description • as a percentage of the size of the containing element

48. with a keyword expressing the size relative to the size of the containing element • With measurement units, can use absolute units or relative units • Absolute units define a font size using one of five units of measurement: mm, cm, in, pt, and pc • 72 points in an inch, 12 points in a pica, 6 picas in an inch

49. For text to be ½ inch, can use any of the following styles (no space between value and unit abbreviation) font-size: 0.5in font-size: 36pt font-size: 3pc • Most useful when you know monitor size and resolution

50. To cope with wide variety of monitors, instead use relative units • Expresses font size relative to size of a standard character on monitor • Two most common standards are “em” and “ex” • The “em unit” is equal to the width of the capital letter “M” • “ex unit” is equal to height of lowercase “x”