1. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Tutorial 7

2. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 2 Using Inline Styles Session 7.1 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;…”>

3. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 3 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 document.

4. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 4 Using an External Style Sheet Because an embedded style sheet only applies to the content of the file it is embedded in, you need to place style declarations in an external style sheet to apply to the rest of the 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

5. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 5 Using an External Style Sheet You can add style comments as you develop an external style sheet. –/* comment */ Use the link element to link a Web page to an external style sheet.

6. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 6 Using an External Style Sheet You can import the content of one style sheet into another. Add the following to either an embedded or an external style sheet –@import(name.css);

7. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 7 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 also link a single document to several style sheets.

8. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 8 Applying a single style sheet to multiple documents

9. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 9 Applying multiple sheets to a single document

10. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 10 Style Precedence 1.External style sheet 2.Embedded styles 3.Inline styles

11. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 11 Style Precedence If two styles have the same weight then the one declared last has precedence. H1 {color: orange; font-family: sans-serif”} H1{color: blue; font-family: serif}

12. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 12 Style Precedence You can override the precedence rules by adding the !important property to a style declaration H1 {color: orange !important; font-family: sans-serif”} H1{color: blue; font-family: serif} Gives the orange colour precedence

13. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 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. –Causes style declarations to cascade down through a document’s hierarchy To set every element on a page to blue –Body {color: blue} Every element on the page inherits this style

14. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 14 Style Inheritance To override style inheritance you specify an alternate style for one of the descendent elements of the parent. –Body {color: blue} –P {color: red} –Changes every element on the page to blue except for paragraphs and every element within a paragraph !important property also overrides style inheritance

15. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 15 Working with Selectors CSS allows you to work with a wide variety of selectors to match different combinations of elements. –h1, h2, h3 {font-family: sans-serif} –h1 {color: blue} –h2 {color: red} h1 headings are blue sans-serif h2 headings are red sans-serif.

16. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 16 Working with Selectors Set all bold text to blue –b {color: blue } Use contextual selectors to apply a style based on the context in which an element is used. Eg, to apply a style to text within a list –li b {color: blue} li is the parent element, b is the descendant element

17. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 17 Simple and contextual selectors

18. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 18 Attribute Selectors Create an attribute selector to select an element based on the element’s attributes. –a {color: blue} – all tags –a[href] {color: blue} – only hrefs, not anchors –See figure 7-13 in your text for a list of attribute selectors

19. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 19 Using IDs and Classes Session 7.2 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 : …

20. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 20 Classes 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. …

21. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 21 Applying a style to a class

22. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 22 Applying a style to a class and element

23. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 23 Sizing Elements and Floating an Element 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 float a paragraph using: float: position

24. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 24 Working with the div Element The div element is a generic block-level element. content

25. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 25 Setting the Display Style Values of the display style

26. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 26 Setting the Display Style Values of the display style

27. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 27 Working with the Box Model The box model is an element composed of four sections: –Margin –Border –Padding –content

28. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 28 The Box Model

29. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 29 Working with the Box Model Styles to set padding are similar to styles to set margins: –padding-top: value –padding-right: value –padding-bottom: value –padding-left: value

30. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 30 Border Styles

31. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 31 Border Style Types

32. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 32 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.

33. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 33 Using Pseudo-Classes and Pseudo-Elements Rollover effects can be created using pseudo-classes. Pseudo-elements are elements based on information about an element’s content, use or position.

34. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 34 Positioning Objects with CSS Session 7.3 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;

35. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 35 Working with Overflow and Clipping The overflow property syntax: overflow: type

36. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 36 Stacking Elements Specify stacking order with: z-index: value z-index: 3 z-index: 1 z-index: 2

37. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 37 Working with Different Media Specify output styles for particular devices in the media attribute of the link and style elements

38. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 38 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.

39. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 39 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

40. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 40 Media Groups

41. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 41 Hiding Elements Two different styles that allow you to hide elements: –Display style –Visibility style

42. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 42 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

43. XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 43 Using Print Styles You can specify the size of a page, margins, internal padding, etc. of the page box. Review the Reference Window on page HTML 420 for working with print styles.