1. XP Review 2 New Perspectives on JavaScript, Comprehensive1 Introducing Cascading Style Sheets Formatting Web Pages with CSS

2. XP Review 2New Perspectives on JavaScript, Comprehensive2 Objectives Understand the history of Cascading Style Sheets Study how to apply inline, embedded, and external style sheets Understand how style definitions are inherited and cascade through a Web site

3. XP Review 2New Perspectives on JavaScript, Comprehensive3 Objectives Learn how to –Work with font and text styles –Understand how to apply image and color styles –Study how to size and position elements on a page –Learn how to work with ids, classes, pseudoelements, and pseudoclasses –Understand how to create style sheets for different media types –Study how to create styles for printed output

4. XP Review 2New Perspectives on JavaScript, Comprehensive4 Introducing CSS Style sheet –Collection of properties that describes how elements within a document should be rendered –Advantage Separates document content from document presentation Cascading Style Sheets language –Most commonly used on the Web

5. XP Review 2New Perspectives on JavaScript, Comprehensive5 Introducing CSS Styles introduced by CSS1 –Fonts, text, color, backgrounds, –Block-level elements Styles introduced by CSS2 –Positioning, visual formatting, media types, interfaces Styles introduced by CSS3 –User interfaces, accessibility, columnar layout –International features, mobile devices –Scalar vector graphics

6. XP Review 2New Perspectives on JavaScript, Comprehensive6 Applying a Style Sheet Techniques for applying style to an HTML or XHTML document –Inline styles –Embedded styles –External styles

7. XP Review 2New Perspectives on JavaScript, Comprehensive7 Using Inline Styles Inline style –Applied to an element by adding the style attribute to the element’s markup tag Syntax of the style attribute

8. XP Review 2New Perspectives on JavaScript, Comprehensive8 Using Embedded Styles Style element –Syntax style declarations –Supports several attributes that define Style sheet language to be used Type of output media for which the style is designed Name or id that identifies the style element

9. XP Review 2New Perspectives on JavaScript, Comprehensive9 Values of the Media Attribute

10. XP Review 2New Perspectives on JavaScript, Comprehensive10 Using an External Style Sheet External style sheet –Simple text file that contains only style declarations –Can be linked to any page in a Web site To make all h1 headings in a Web site appear in red font –h1 {color: red}

11. XP Review 2New Perspectives on JavaScript, Comprehensive11 Applying Multiple Style Sheets to a Single Document

12. XP Review 2New Perspectives on JavaScript, Comprehensive12 Understanding Style Precedence When styles come from several sources, they are weighted as follows –1. External style sheet –2. Embedded styles –3. Inline styles

13. XP Review 2New Perspectives on JavaScript, Comprehensive13 Understanding Style Inheritance Style inheritance –Causes style declarations to cascade down through the document hierarchy To override style inheritance –Specify alternate style for one of the descendant elements of the parent

14. XP Review 2New Perspectives on JavaScript, Comprehensive14 Working with Text Styles Specifying font font-family: fonts Specific font –Font such as Times New Roman, Arial, or Garamond that is installed on user’s computer Generic font –Name for the general description of the font’s appearance

15. XP Review 2New Perspectives on JavaScript, Comprehensive15 Generic Fonts

16. XP Review 2New Perspectives on JavaScript, Comprehensive16 Setting the Font Size Absolute units –Define font size using mm (millimeter), cm (centimeter), in (inch), pt (point), or pc (pica) Relative units –Express font size relative to size of a standard character in output device em unit –Equal to the width of the capital letter “M” ex unit –Equal to the height of a lowercase “x”

17. XP Review 2New Perspectives on JavaScript, Comprehensive17 Controlling Spacing and Indentation CSS support styles that –Allow you to perform basic typographic tasks, such as setting the kerning and tracking Styles to control an element’s kerning and tracking letter-spacing: value word-spacing: value

18. XP Review 2New Perspectives on JavaScript, Comprehensive18 Setting Font Styles, Weights, and Other Decorative Features To set a font’s appearance font-style: type To set a font’s weight font-weight: value To decorate text text-decoration: type

19. XP Review 2New Perspectives on JavaScript, Comprehensive19 Values of the Vertical-alignment Style

20. XP Review 2New Perspectives on JavaScript, Comprehensive20 Working with Color and Image Styles Style to define an element’s foreground color color: color Color values are entered in the form rgb (red, green, blue) Style to define an element’s background color background-color: color

21. XP Review 2New Perspectives on JavaScript, Comprehensive21 Setting a Background Image Properties you can set on a background image –The source of the image file –Where the image is placed in the background of the element –How the image is repeated across the background of the element –Whether the image scrolls with the display window

22. XP Review 2New Perspectives on JavaScript, Comprehensive22 Controlling Image Placement Controlling how browsers tile a background image background-repeat: type Placing a background image in a different location background-position: horizontal_position vertical_position Defining the position of a background image background-position: 50% 50%

23. XP Review 2New Perspectives on JavaScript, Comprehensive23 Sizing Elements Size of each element –Determined either by its content or –By the size of its containing element Setting the width of an element width: value Setting an element’s height height: value

24. XP Review 2New Perspectives on JavaScript, Comprehensive24 Working with Borders, Margins, and Padding Box model –Identifies the different parts of the element Elements described by box model –Margin between the box and other elements –Border of the box –Padding between element’s content and border –Element’s content

25. XP Review 2New Perspectives on JavaScript, Comprehensive25 Working with Margins Styles that can be used to control the size of the margin of a page element margin-top: value margin-right: value margin-bottom: value margin-left: value

26. XP Review 2New Perspectives on JavaScript, Comprehensive26 Working with Borders To set width of an element’s border border-width: top right bottom left To set the border color border-color: top right bottom left To set the border style border-style: top right bottom left To format the entire border border: width style color

27. XP Review 2New Perspectives on JavaScript, Comprehensive27 Positioning Elements Style to set position of an element position: type; top:value; right:value; bottom:value; left:value Position style has five possible values –static, absolute, relative, fixed, and inherit

28. XP Review 2New Perspectives on JavaScript, Comprehensive28 Absolute Positioning Places an element at defined coordinates within its parent element In most cases –Parent element is the document window itself

29. XP Review 2New Perspectives on JavaScript, Comprehensive29 Absolute Positioning

30. XP Review 2New Perspectives on JavaScript, Comprehensive30 Relative Positioning

31. XP Review 2New Perspectives on JavaScript, Comprehensive31 Fixed and Static Positioning Fixed position –Places element at a fixed location in display window Static position –Places object in its natural position in the flow of the document as determined by the browser

32. XP Review 2New Perspectives on JavaScript, Comprehensive32 Floating an Element Places element alongside the left or right margin of the page or the containing element Style to float an element float: margin

33. XP Review 2New Perspectives on JavaScript, Comprehensive33 The Float Style

34. XP Review 2New Perspectives on JavaScript, Comprehensive34 Stacking Elements By default –Elements defined later in a document are placed on top of earlier elements To specify a different stacking order z-index: value Elements are stacked based on –z-index values

35. XP Review 2New Perspectives on JavaScript, Comprehensive35 Using the z-index Style

36. XP Review 2New Perspectives on JavaScript, Comprehensive36 Setting the Element Display Style Most page elements –Classified as either inline elements or block-level elements CSS –Can be used to change the display style applied to any element –Syntax display: type

37. XP Review 2New Perspectives on JavaScript, Comprehensive37 Setting the Display Style

38. XP Review 2New Perspectives on JavaScript, Comprehensive38 Hiding Elements Two ways of hiding an element –Set the value of the display style to “none” address {display: none} –Use the visibility style visibility: type

39. XP Review 2New Perspectives on JavaScript, Comprehensive39 Working with Selectors Contextual selectors –Used to apply a style based on the context in which an element is used –Can also be grouped with selectors li b, h2 {color: blue}

40. XP Review 2New Perspectives on JavaScript, Comprehensive40 Simple and Contextual Selectors

41. XP Review 2New Perspectives on JavaScript, Comprehensive41 Attribute Selectors

42. XP Review 2New Perspectives on JavaScript, Comprehensive42 Applying Styles to IDs and Classes To apply a style to an element based on the value of its id attribute #id {styles} Class attribute –Used to identify a group of elements To apply a style to a group of elements based on value of class attribute.class {styles}

43. XP Review 2New Perspectives on JavaScript, Comprehensive43 Applying a Style to a Class

44. XP Review 2New Perspectives on JavaScript, Comprehensive44 Applying Styles to Pseudoclasses and Pseudoelements Pseudoclass –Classification of an element based on its status, position, or current use in a document –Used to create rollover effects To create a style for a pseudoclass selector:pseudoclass {styles}

45. XP Review 2New Perspectives on JavaScript, Comprehensive45 Working with Different Media To specify output media within a style sheet @media type {style declarations} @media rule –Allows you to consolidate your styles within a single style sheet –Consolidation can result in larger and complicated files

46. XP Review 2New Perspectives on JavaScript, Comprehensive46 Using Print Styles CSS2 defines printed pages by –Extending box model to incorporate the entire page in a page box Rule to create and define a page box @page {styles} Pseudoclasses or page names –Allow you to define multiple page styles within the same document

47. XP Review 2New Perspectives on JavaScript, Comprehensive47 Setting the Page Size Size style –Used to define size of the output page –Syntax size: width height orientation

48. XP Review 2New Perspectives on JavaScript, Comprehensive48 Working with Page Breaks Page-break-before and page-break-after styles –Used to place page breaks before or after a given element –Syntax page-break-before: type page-break-after: type

49. XP Review 2New Perspectives on JavaScript, Comprehensive49 Working with Page Breaks Widow –Final few lines of an element’s text when they appear at the top of a page Orphan –First few lines of an element’s text when they appear at the bottom of a page

50. XP Review 2New Perspectives on JavaScript, Comprehensive50 Working with Page Breaks Browsers attempt to use page breaks that obey these guidelines –Avoid inserting page breaks where indicated in style sheet –Break pages as few times as possible –Avoid breaking inside of a table –Avoid breaking inside of a floating element