1. Tutorial 3 Working with Cascading Style Sheets

2. Introducing Cascading Style Sheets Style sheets are declarations that describe the layout and appearance of a document Cascading Style Sheets (CSS) is a style sheet language used on the Web – CSS specifications are maintained by the World Wide Web Consortium (W3C) www.w3c.orgwww.w3c.org – Several versions of CSS exist: CSS1, CSS2, CSS 2.1, and CSS3 New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 2

3. Cascading Style Sheets Cascading Style Sheets (CSS) specifications are maintained by the World Wide Web Consortium (W3C) Several versions of CSS exist: CSS1 (1996) CSS2 (1998) CSS 2.1 (revision of CSS2) the newest useable version. However, it was returned to Candidate status in 2005 when the W3C decided to more strictly enforce standards. CSS3 still in Candidate status New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 3

4. Applying a Style Sheet Three ways to apply a style to an HTML or XHTML document: – Inline Styles – Apply to just one tag – Embedded Style Sheet – Apply to whole Web page – External Style Sheet – Apply to whole Web site New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 4

5. Using Inline Styles Inline styles are easy to use and interpret because they are applied directly to the elements they affect <element style=“style1: value1; style2: value2; style3: value3;…”> New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 5 The style attribute is used to affect an individual HTML element Note semi- colon Note colon

6. Using Embedded Styles You can embed style definitions in a document head using the following form: style declarations Where style declarations are the declarations of the different styles to be applied to the whole document New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 6

7. Using Embedded Styles New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 7 Note the curly braces. You don't use curly braces with inline styles Note also, the “selector”, you have to let the browser know which element to apply the style to. This is not needed with inline styles, as the style is, by definition, applied to the tag in which it is found.

8. Using an External Style Sheet Because an embedded style sheet only applies to the content of one page, you need to place a style declaration in an external style sheet to apply to an entire Web site An external style sheet is a text file that contains style declarations – It can be linked to any page in the site, allowing the same style declaration to be applied to the entire site New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 8

9. Using an External Style Sheet You can add style comments as you develop an external style sheet /* comment */ New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 9

10. Understanding Cascading Order You can link a single style sheet to multiple documents in your Web site by using the link element You can also link a single document to several style sheets If you have conflicting styles the one with the highest precedence is used. New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 10

11. Style Inheritance If a style is not specified for an element, it inherits the style of its parent element. This is called style inheritance body {color: blue} p {color: red} In the above example, the body element is the parent element examples/005_pg-134-style-inheritance.htmexamples/005_pg-134-style-inheritance.htm New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 11

12. Applying a Style to a Specific ID To apply a style to an element marked with a specific id value, use the declaration #id {style rule} where id is the value of the element’s id attribute and style rule stands for the styles applied to that specific element When specifying an ID, you preface the ID with a pound sign (#) examples\007_pg-134-applying-style-to-id.htm New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 12

13. Working with Color in HTML and CSS Any color can be thought of as a combination of three primary colors: red, green, and blue By varying the intensity of each primary color, you can create almost any color and any shade of color This principle allows a computer monitor to combine pixels of red, green, and blue to create the array of colors you see on your screen New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 13

14. Working with Color in HTML and CSS New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 14

15. Working with Color in HTML and CSS HTML is a text-based language, requiring you to define your colors in textual terms HTML identifies a color in one of three ways: – By the color name, a numeric expression or RGB value background-color: orange background-color: #FFA500 background-color: rgb(255, 165, 0) demo_css.htm New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 15 All the same color

16. Working with Color in HTML and CSS Using the basic color names allows you to accurately display them across different browsers and operating systems There were originally 16 basic colors, CSS 2.1 added another one. The list of only 17 colors is limiting to Web designers New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 16

17. Working with Color in HTML and CSS New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 17 Partial list of 140 extended color names demo_color_names.htmdemo_color_names.htm List of valid color names demo_safety_palette.htmdemo_safety_palette.htm List of “Safe” colors – those guaranteed to be safe from dithering

18. Defining Text and Background Colors Background color definition: – background-color: color Text color definition: – color: color where color is either the color value or the color name You can apply text and background colors to any page element examples\008_pg-138-controlling-color.htm New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 18

19. New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 19 Go to my Web site and download the files for Tutorial 3 http://www.kapple01.com/ccm/web2/home/web2_labdata.html Unzip the files into a work folder on your flash drive Go to pg 121 in text book and start the in-chapter exercise. Stop when you get to the end of the section on page 140

20. Working with Fonts and Text Styles A specific font is a font such as Times New Roman, Arial, or Garamond. The font is installed on a user’s computer A generic font refers to the font’s general appearance New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 20 Generic fonts

21. Working with Fonts and Text Styles CSS allows you to specify a list of specific fonts along with a generic font In HTML we used to change the font. The style version is If the browser cannot find any of the specific fonts listed, it uses the generic font font-family: Arial, Helvetica, ‘Trebuchet MS’, sans-serif New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 21

22. Setting the Font Size The style to change the font size of text within an element is: – font-size: length where length is a number followed by a unit of measure Absolute units define a font size using one of five standard units of measurement: – Millimeters (mm) – Centimeters (cm) – Inches (in) – Points (pt) – Picas (pc) New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 22

23. Setting the Font Size Many Web page designers opt to use relative units, which are expressed relative to the size of other objects within the Web page – Em units (have become increasingly popular because they scale nicely to different pages) – Percentages – Relative keywords xx-small, x-small, small, medium, large, x-large, xx-large Larger Smaller New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 23

24. Spacing and Indentation Kerning is the amount of space between characters – letter-spacing: value Tracking is the amount of space between words and phrases – word-spacing: value Leading is the space between lines of text – line-height: length Indent is the amount of space that you want to indent the first line of a paragraph – text-indent: value Value can be negative – creating a hanging indent New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 24

25. Applying Font Features To specify font styles, use the following style: – font-style: type To control font weight for any page element, use the following style: – font-weight: weight To change the appearance of your text, use the following style: – text-decoration: type New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 25

26. Applying Font Features Capitalize: – text-transform: type Uppercase letters, small font: – font-variant: type New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 26

27. Aligning Text Vertically Use the vertical-align attribute to align text vertically – vertical-align: type New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 27

28. Combining All Text Formatting in a Single Style You can combine most of them into a single declaration, using the style font: font-style font-variant font-weight font-size line-height font-family You don't have to specify all the formatting, but they must be specified in this order. New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 28

29. Examples of Font Styles New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 29 012_pg-152-font-example.htm

30. Working with GIF Images GIF (Graphics Interchange Format) is the most commonly used image format on the Web Compatible with virtually all browsers GIF files are limited to displaying 256 colors Often used for graphics requiring fewer colors, such as clip art images, line art, logos, and icons Images that require more color depth, such as photographs, can appear grainy when saved as GIF files New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 30

31. Working with GIF Images A transparent color is a color that is not displayed when the image is viewed in an application A splash screen is a Web page containing interesting animation or graphics that introduces a Web site New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 31

32. JPEG Images JPEG stands for Joint Photographic Experts Group Supports up to 16.7 million colors Most often used for photographs and other images that cover a wide spectrum of color Surprisingly, often smaller than their GIF counterparts. This is due to better compression algorithms. New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 32 JPEGs do not support transparency as Gifs do.

33. PNG Images A file format called PNG (Portable Network Graphics) has been gaining wider acceptance PNG files use a free and open file format and can display more colors than GIFs PNGs do allow transparent colors, but not all browsers support this feature New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 33

34. Setting the Image Size By default, browsers display an image at its saved size You can specify a different size by adding the HTML attributes width="value" height="value" New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 34

35. Formatting Backgrounds New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 35

36. Background Image Options By default, background images are tiled both horizontally and vertically until the entire background of the element is filled up You can specify the direction of the tiling using the style: – background-repeat: type New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 36

37. Background Image Options New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 37 013_pg-161-background-placement.htm

38. The Background Style You can combine the various background styles into the following single style: background: color url(url) repeat attachment horizontal vertical New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 38 Color defines the background color URL defines the image to be used Repeat defines how and if the image repeats (see previous slide) Attachment specifies if the image scrolls or is fixed as user moves scroll bar Horizontal specifies Horizontal placement: Left/Center/Right Vertical specifies Vertical placement: Top/Center/Bottom 015_pg-161-background-placement.htm

39. New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 39 Go to pg 149 in text book and continue the in-chapter exercise. Stop when you get to the end of the section on page 161 To save class-time, I want you to skip the demos on pages 141, 146, 147 and 151. If you finish the section before I start lecturing, you can go back and play with these demos, or you can examine them outside of class. But for now, I don’t want to spend class time on the demos.

40. Floating an Element New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 40 The syntax for the float style is: style=“float: right” or “float: left” or “float: none” examples/020_pg-163-float.htm

41. New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 41 pg-164-clear.htm

42. Working with the Box Model New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 42 pg-166-box-model.htm

43. Margin Styles Control your margins with the following four styles: – margin-top: lengthmargin-right: length – margin-bottom: lengthmargin-left: length Margin values can also be negative. This may create an overlay effect by forcing the browser to render one element on top of another You can also combine the four margin styles into a single style: – margin: top right bottom left If you use this shorthand, elements must be coded in this order If you specify just one value, it will pertain to all margins If you specify 3values they will affect: Top, Right and Bottom If you specify 2 values, the first value affects top and bottom, the second affects left and right (error in book says it applies only to top and bottom) 035_pg-167-margin.htm New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 43

44. Margin Style Examples New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 44 :

45. Padding Styles New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 45

46. Border Styles border-top-width: length border-right-width: length border-bottom-width: length border-left-width: length border-width: top right bottom left border-top-color: color border-right-color: color border-bottom-color: color border-left-color: color border-color: top right bottom left New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 46 Length is specified in a unit of measure like: px, em, pt etc….. Color is specified with a numeric color value or color name You can only change the color of the border, you can’t change the color of the margin or padding

47. Border Styles 47 Important. If you want to see your border you must specify one of these options (except none) You can combine all of the border styles in one “super style” border: width style color pg-169-border-combined.htm Do not combine shortcut and long versions: pg_169-dont-combine-short-and-longpg_169-dont-combine-short-and-long

48. Border Styles 48 Let’s review the example from a few slides back. If you remember when we coded float: right everything looked fine, however with float: left there was no space between the image and the paragraph 043_pg-164,169-float-does-not-chg-size.htm

49. Width and Height Styles To set the box model width, use – width: length where length is the width of the box content in one of the CSS units of measure. Note that Internet Explorer applies the width value to the box model content, padding, and border. But the CSS model applies width only to content. This means that other browsers will render the width differently (see next slide) To set the box model height, use – height: length where length is the height of the box content in one of the CSS units of measure New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 49

50. Width and Height Styles New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 50 Width applies only to content Width applies content, padding and borders

51. Controlling Page Layout with div Containers Sections of page content can be enclosed in div containers div containers can be resized and floated to create different page layouts A div container lets you create a block of page content that you can manipulate using styles New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 51

52. Controlling Page Layout with div Containers New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 52

53. div container example New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 53

54. div container example New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 54 pg-174-div.htm

55. Span for inline style New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 55 047_pg-179-span.htm

56. Setting the Display Style New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 56 Values of the display style

57. Setting the Display Style To set the display style of an element, use – display: type where type is the type of display. Use inline for inline elements and block for block-level elements New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 57

58. Setting the Display style New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 58 pg-180-display-style.htm

59. New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 59 Review Then: Go to pg 162in text book and complete the in-chapter exercise. When you are done make sure you ZIP the entire folder and send it to me in an e-mail Don’t forget to do Case Study 2 starting on pg 190