Chapter 2 – Introduction to HTML: Part 3 - Cascading Style Sheets™ (CSS)

1. Chapter 2 – Introduction to HTML:Part 3 - Cascading Style Sheets™ (CSS) • Outline • Introduction • Inline Styles • Embedded Style Sheets • Conflicting Styles • Linking External Style Sheets • W3C CSS Validation Service • Positioning Elements • Backgrounds • Element Dimensions • Text Flow and the Box Model • User Style Sheets • Web Resources

2. Objectives • In this lesson, you will learn: • To control the appearance of a Web site by creating style sheets. • To use a style sheet to give all the pages of a Web site the same look and feel. • To use the class attribute to apply styles. • To specify the precise font, size, color and other properties of displayed text. • To specify element backgrounds and colors. • To understand the box model and how to control the margins, borders and padding. • To use style sheets to separate presentation from content.

3. Introduction • Cascading Style Sheets (CSS) • Separation of structure from presentation • new way of formatting your page layout, text, fonts, images • allow you to position things on your page down to the exact pixel • style sheetstypes: • Inline • Embedded or Internal • External

4. Inline Styles • Declare an individual element’s format • Attribute style • CSS property • Followed by a colon and a value

5. inline.html(1 of 2)

6. inline.html(2 of 2)

7. Embedded Style Sheets • Embed an entire CSS document in an HTML document’s head section • Multipurpose Internet Mail Extensions (MIME) type • Describes a file’s content • Property background-color • Specifies the background color • font-family(line 18)-specifies the name of font to use. h1 { font-family:arial, sans-serif } • Font arial will be used. If the arial font is not found on the system, the browser instead will display a generic sans-serif font. • Monospace (e.g: Courier, Fixedsys)

8. Embedded Style Sheets • Other generic font families: • Serif (e.g:Times New Roman, Georgia) • Sans-Serif (e.g: Helvetica, Verdana) • Cursive ( e.g: script) • Fantasy (e.g: critter) • Monospace (e.g: Courier, Fixedsys) • font-size(line 20)-specifies the size of font. • Other possible measurements in addition to pt(point)- will be introduced later. • Relative values- xx-small, x-small, small, smaller, medium, large, larger, x-large and xx-large.

9. Embedded Style Sheets • Relative values are preferred because an author does not know the specific measurements of the display for each client. • Relative font-size values permit more flexible viewing of web pages. • If relative font-size is specified, the actual size is determined by the browser that displays the font. • E.g: Handheld device with a small screen.

10. declared.html(1 of 3)

11. declared.html(2 of 3)

12. declared.html(3 of 3)

13. Conflicting Styles • Inheritance HTML <p class = "special"> The company's clients include many <em>Fortune 1000 companies</em>, government agencies………..</p> CSS em { background-color:#8000ff; color:white } p { font-size:14pt } .special { color:blue } • Child em element inherited the font-size property from its parent p element. • However, the child em element had a color property that conflicted with the color property of its parent p element.

14. Conflicting Styles • Descendant’s properties have greater specificity than ancestor’s properties. • Conflicts are resolved in favor of properties with a higher specificity.

15. advance.html(1 of 3)

16. advance.html(2 of 3)

17. advance.html(3 of 3)

18. Linking External Style Sheets • External style sheets • Can provide uniform look and feel to entire site • Text-decoration(line 14 & 16) –applies decorations to text within an element. • Possible values of Text-decoration – none, overline, line-through, underline, blink(not supported by IE) • hover (pseudoclass)(line 16-18)- activated dynamically when the user moves the mouse cursor over an element. • Pseudoclassses are seperated by a colon from the name of the element to which they are applied.

19. Linking External Style Sheets • Margin-left(line 23 & 26)- ul { margin-left:15px } • Left-hand margin of 15 pixels • Relative-length measurement- varies in size, based on screen resolution. Example: px, em, ex, percentage(%) • Absolute-length measurement- not vary in size based on the system. Example: in(inches), cm(centimeter), mm(milimeter), pt(points), pc(picas)

20. styles.css(1 of 1)

21. external.html(1 of 2)

22. external.html(2 of 2)

23. W3C CSS Validation Service • Validates external CSS documents • Ensures that style sheets are syntactically correct URL = http://jigsaw.w3.org/css-validator/

24. W3C CSS Validation Service Fig. 6.6 Validating a CSS document. (Courtesy of World Wide Web Consortium (W3C).)

25. W3C CSS Validation Service Fig. 6.7 CSS validation results. (Courtesy of World Wide Web Consortium (W3C).)

26. Positioning Elements • Absolute positioning • Removes the elements from the normal flow of elements on the page, instead positioning it according to the distance from the top, left, right, or bottom margin of its containing block-level element (i.e: body, p) • z-index attribute • Layer overlapping elements properly • Elements that have a higher z-index values are displayed in front of elements with lower z-index values. • If z-index is not specified/ elements have same z-index value= elements are placed from background to foreground in order they are encountered in the document. • Relative positioning • Elements are positioned relative to other elements

27. positioning.html(1 of 1)

29. positioning2.html(1 of 2)

30. positioning2.html2 of 2

32. Span • grouping element- it does not apply any inherent formatting to its contents • Primary purpose: To apply CSS rules or id attributes to a block of text. • Displayed inline with other text and with no line breaks. span{color: red; font-size: .6em; height:1em} • Div • Same as Span, it does not apply any inherent formatting to its contents • Displayed on its own line, with margins above and below div{background-color: #ffccff; margin-bottom: .5em}

33. Backgrounds • background-image • Specifies the image URL • Can also set background-color property in case the image is not found • background-position • Places the image on the page • Some of the values: top, bottom, center,left, right • All above values are used individually or combination for vertical and horizontal positioning. • Example: To position the image as horizontally centered(positioned at 50% of the distance across the screen) and 30 pixels from the top, use: background-position: 50% 30px;

34. Backgrounds • background-repeat • Controls the tiling of the background image • Possible values: no-repeat, repeat, repeat-x (tile the image horizontally), repeat-y (tile the image vertically) • background-attachment • Fixed (fix the image in the position specified by background-position) • Scroll (moves the image when user scrolls through the document)

35. Backgrounds • font-weight • Specify the “boldness” of text • Possible values: bold, normal, bolder, lighter • font-style • Possible values: none, italic, oblique (will default to italic if the system does not support oblique text.)

36. Example using background-image property <FORM><TEXTAREA rows = "10" cols= "50" style = "background-image:url(images/cloudysky.jpg)">I like Unix based computers because they are so good! </TEXTAREA> </FORM>

37. Textarea, Buttons with CSS

38. Example using list-style-imageproperty • list-style-image property replace un-numbered list bullet’s shape with images. <ULstyle="list-style-image:url(images/img_list_br_arr_left.gif)"> <LI>Mathematics <LI>Physics <LI>Philosophy <LI>FineArt <LI>InformationTechnology </UL> • More: list-style-type, list-style-position

39. Un-ordered list with CSS

40. background.html(1 of 2)

41. background.html(2 of 2)

43. Element Dimensions • CSS rules can specify the actual dimensions of each page element • …..overflow: scroll(line 32) –a setting that adds scrollbars if the text overflows the boundaries.

44. width.html(1 of 2)

45. width.html(2 of 2)

46. Text Flow and the Box Model • Floating • Move an element to one side of the screen • Box model • Margins • margin-top, margin-right, margin-left, margin-bottom • Padding • padding-top, padding-right, padding-left, and padding-bottom • Border • border-width • thin, medium, thick • border-color • Sets the color • border-style • none, hidden, dotted, dashed, solid, double, groove, ridge, inset and outset

47. floating.html(1 of 3)

48. floating.html(2 of 3)

49. floating.html(3 of 3)

50. <p style=“clear: right”>…..</p>(line 49) • Possible values of clear = right, left • By setting clear property to the same direction as that in which the elements is floated (right or left), you can interrupt the flow of text around a floated element.