1. XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7

2. XP 2 Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document Style sheets are files or forms that describe the layout and appearance of a document Separate content from display information Separate content from display information Cascading Style Sheets, or CSS, is a style sheet language used on the Web Cascading Style Sheets, or CSS, is a style sheet language used on the Web CSS specifications are maintained by the World Wide Web Consortium (W3C) CSS specifications are maintained by the World Wide Web Consortium (W3C) Three versions of CSS exist: CSS1, CSS2, and CSS3 Three versions of CSS exist: CSS1, CSS2, and CSS3

3. XP 3 4 Factors How web document is rendered to user How web document is rendered to user Media - computer screen, printers, etc. Media - computer screen, printers, etc. Browser/OS Browser/OS User - most browsers allow user to override default settings User - most browsers allow user to override default settings Code - separate content from instructions how to render Code - separate content from instructions how to render

4. XP 4 Applying a Style Sheet Three ways to apply a style to an HTML or XHTML document: Three ways to apply a style to an HTML or XHTML document: Inline Styles - applied to specific element Inline Styles - applied to specific element Embedded Styles - in document head - for document elements Embedded Styles - in document head - for document elements External Styles - separate document - applied to a group of web pages External Styles - separate document - applied to a group of web pages

5. XP 5 Using Inline Styles Inline styles are easy to use and interpret because they are applied directly to the elements they affect. 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;…”>

6. XP 6 Using Embedded Styles You can embed style definitions in a document head using the following form: You can embed style definitions in a document head using the following form:<style> style declarations </style> Style attributes Style attributes Applying embedded style Applying embedded style

7. XP 7 Using an External Style Sheet Because an embedded style sheet only applies to the content of the start.htm file, you need to place a style declaration in an external style sheet to apply to the headings in the rest of the Web site - could do it with one file Because an embedded style sheet only applies to the content of the start.htm file, you need to place a style declaration in an external style sheet to apply to the headings in the rest of the Web site - could do it with one file An external style sheet is a text file that contains style declarations 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 It can be linked to any page in the site, allowing the same style declaration to be applied to the entire site

8. XP 8 Using an External Style Sheet You can add style comments as you develop an external style sheet - should do You can add style comments as you develop an external style sheet - should do Use the link element to link a Web page to an external style sheet Use the link element to link a Web page to an external style sheet You can import the content of one style sheet into another - must come before any other style declarations - recommended over link - supported by more browsers You can import the content of one style sheet into another - must come before any other style declarations - recommended over link - supported by more browsers

9. XP 9 Understanding Cascading Order You can link a single style sheet to multiple documents in your Web site by using the link element or the @import element You can link a single style sheet to multiple documents in your Web site by using the link element or the @import element You can also link a single document to several style sheets You can also link a single document to several style sheets

10. XP 10 Applying a single style sheet to multiple documents

11. XP 11 Applying multiple sheets to a single document

12. XP 12 Style Precedence 1. External style sheet 2. Embedded styles 3. Inline styles If same weight - last declaration - takes precedence If same weight - last declaration - takes precedence Override precedence - important property Override precedence - important property

13. XP 13 Style Inheritance If a style is not specified for an element, it inherits the style of its parent element; This is called style inheritance. If a style is not specified for an element, it inherits the style of its parent element; This is called style inheritance. Get the bigger declaration Get the bigger declaration Override - specify alternate for one of the descendant elements Override - specify alternate for one of the descendant elements

14. XP 14 Working with Selectors CSS allows you to work with a wide variety of selectors to match different combinations of elements CSS allows you to work with a wide variety of selectors to match different combinations of elements Use contextual selectors to apply a style based on the context in which an element is used Use contextual selectors to apply a style based on the context in which an element is used

15. XP 15 Simple and contextual selectors

16. XP 16 Attribute Selectors Create an attribute selector to select an element based on the element’s attributes Create an attribute selector to select an element based on the element’s attributes

17. XP 17 Using IDs and Classes Use an id to distinguish something, like a paragraph, from the others in a document Use an id to distinguish something, like a paragraph, from the others in a document For example, to identify a paragraph as “head”, use the code : For example, to identify a paragraph as “head”, use the code : … …

18. XP 18Classes HTML and XHTML require each id be unique– therefore an id value can only be used once in a document HTML and XHTML require each id be unique– therefore an id value can only be used once in a document You can mark a group of elements with a common identifier using the class attribute You can mark a group of elements with a common identifier using the class attribute … …

19. XP 19 Applying a style to a class

20. XP 20 Applying a style to a class and element

21. XP 21 Sizing Elements and Floating an Element Style sheets instead of tables - more flexible, applied to multiple documents, easier to maintain, smaller file sizes, more manageable code Style sheets instead of tables - more flexible, applied to multiple documents, easier to maintain, smaller file sizes, more manageable code Not supported by all browsers Not supported by all browsers You can define the width of columns in a columnar layout using: width: value You can define the width of columns in a columnar layout using: width: value You can use CSS to set an element’s height using: height: value You can use CSS to set an element’s height using: height: value You can float a paragraph using: float: position You can float a paragraph using: float: position

22. XP 22 Working with the div Element The div element is a generic block-level element - treat several elements as a single unit The div element is a generic block-level element - treat several elements as a single unit<div>content</div>

23. XP 23 Setting the Display Style Values of the display style

24. XP 24 Setting the Display Style Values of the display style

25. XP 25 Working with the Box Model The box model is an element composed of four sections: The box model is an element composed of four sections: Margin - between element and other content Margin - between element and other content Border Border Padding - between element’s content and border Padding - between element’s content and border content content

26. XP 26 The Box Model

27. XP 27 Working with the Box Model Styles to set padding are similar to styles to set margins: Styles to set padding are similar to styles to set margins: padding-top: value padding-top: value padding-right: value padding-right: value padding-bottom: value padding-bottom: value padding-left: value padding-left: value

28. XP 28 Border Styles

29. XP 29 Border Style Types

30. XP 30 Using Pseudo-Classes and Pseudo-Elements A pseudo-class is a classification of an element based on its status, position, or current use in the document A pseudo-class is a classification of an element based on its status, position, or current use in the document

31. XP 31 Using Pseudo-Classes and Pseudo-Elements Rollover effects can be created using pseudo-classes Rollover effects can be created using pseudo-classes Pseudo-elements are elements based on information about an element’s content, use or position Pseudo-elements are elements based on information about an element’s content, use or position

32. XP 32 Positioning Objects with CSS The different positioning styles in the original CSS1 specifications were known as CSS-Positioning or CSS-P To place an element at a specific position on a page use: position: type; top: value; right: value; bottom: value; left: value; Type - positioning type applied to element Absolute - place at specific coordinates Relative - in relation to its default, normal position Fixed - does not scroll with rest of page Inherited - inherit position style of parent element

33. XP 33 Working with Overflow and Clipping The overflow property syntax: overflow: type

34. XP 34 Stacking Elements Specify stacking order with: z-index: value z-index: 3 z-index: 1 z-index: 2

35. XP 35 Working with Different Media Specify output styles for particular devices in the media attribute of the link and style elements

36. XP 36 The @media Rule You can also specify the output media within a style sheet using: @media type {style declarations} Where media is one of the supported media types and style declarations are the styles associated with that media type

37. XP 37 Media Groups CSS2 uses media groups to describe basic facets of different media– and to differentiate between different types of media based on the ways they render content Continuous or paged Visual, aural, or tactile Grid (for character grid devices) or bitmap Interactive or static

38. XP 38 Media Groups

39. XP 39 Hiding Elements Two different styles that allow you to hide elements: Display style - “none” - element is not rendered by output device Visibility style -

40. XP 40 Comparing the visibility and display styles Visibility hidden Object is hidden but still is part of the page flow Display: none Object is hidden and is removed from the page flow

41. XP 41 Using Print Styles You can specify the size of a page, margins, internal padding, etc. of the page box Page pseudo-classes and named pages First Left Right Name Setting the page size Displaying crop marks Page breaks - relation to the elements Before After Always, avoid, left, right, auto, inherit

42. XP 42 Assign #18 Case 1, pg. 424-426 - print code and finished product, black and white is acceptable. Assign #19 Case 2, pg. 427-429 - print code and finished product, black and white is acceptable.