1. Tutorial 3 Introducing Cascading Style Sheets

2. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Learn about Cascading Style Sheets Write CSS styles Choose the correct style to format a Web page Create an embedded style sheet Understand how color is used on a Web page Make text bold and italic using CSS Specify fonts with the font properties Make text appear in small capital letters Use a shorthand property to write more concise code

3. XP Introducing Cascading Style Sheets Provides a way to easily and efficiently format an unlimited number of Web pages with a consistent appearance Offers many advantages: – Greater consistency in your Web site – Easily modified code – More flexible formatting – Greater functionality Cross-browser support allows CSS to appear in all Web browsers without any differences New Perspectives on Blended HTML, XHTML, and CSS3

4. XP Understanding How Styles Are Written A style is a consistent, recognizable pattern A CSS style is a collection of one or more rules A style sheet is a collection of styles A rule is the combination of a selector, a property, and a value The selector identifies the element to which you are applying a style. – Element, type, class, and id selectors New Perspectives on Blended HTML, XHTML, and CSS4

5. XP Creating a CSS Style In a text document, type the selector followed by a left brace, as in the following code, and then press the Enter key. selector { Type the declarations (each indented by two or three spaces), separating a property from a value with a colon. Type a semicolon after each declaration, and then press the Enter key, as in the following code. property: value; New Perspectives on Blended HTML, XHTML, and CSS5

6. XP Creating a CSS Style Type a right brace on its own line (but not indented) below the declaration list. The following code shows the complete syntax for a rule: selector { property: value; } New Perspectives on Blended HTML, XHTML, and CSS6

7. XP Understanding How Styles Are Written New Perspectives on Blended HTML, XHTML, and CSS7

8. XP Working with Color The color property changes the foreground color of an element The background-color property changes the background color of an element You can define color in three ways: – By name – By their RGB triplet – By a hexadecimal value New Perspectives on Blended HTML, XHTML, and CSS8

9. XP Working with Color New Perspectives on Blended HTML, XHTML, and CSS9

10. XP Creating an Embedded Style Sheet An embedded style sheet is one in which the CSS code is written in the section of an XHTML document On a blank line in the section of an XHTML document, type: Press the Enter key four times Type the end tag Position the insertion point on the blank line between the start and end tags Type the CSS code New Perspectives on Blended HTML, XHTML, and CSS10

11. XP Creating an Embedded Style Sheet The following code shows the syntax for an embedded style sheet:... CSS code is typed here... New Perspectives on Blended HTML, XHTML, and CSS11

12. XP Creating an Embedded Style Sheet New Perspectives on Blended HTML, XHTML, and CSS12

13. XP Grouping Element Selectors Grouped selectors are selectors with the same declarations grouped into a comma-separated list New Perspectives on Blended HTML, XHTML, and CSS13

14. XP Using Descendant Selectors A descendant selector is a selector nested within another selector New Perspectives on Blended HTML, XHTML, and CSS14

15. XP Using Font Properties New Perspectives on Blended HTML, XHTML, and CSS15

16. XP Using Font Properties The font-variant property can make text appear in small caps New Perspectives on Blended HTML, XHTML, and CSS16

17. XP Using Font Properties The font-size property is used to change the font size You can express font size in: – Centimeters – Inches – Millimeters – Points – Picas – Pixels – X-Height – em – Percentage New Perspectives on Blended HTML, XHTML, and CSS17

18. XP Using Font Properties Em units and percents are examples of a relative value, a value that increases or decreases in size in relation to its parent element Point values are an absolute value, a fixed value that will not increase or decrease in size in relation to its parent element New Perspectives on Blended HTML, XHTML, and CSS18

19. XP Using Font Properties The font-family property is used to change the typeface of text A font family is a set of fonts that have similar characteristics – Fonts you see depend on the platform Generic font New Perspectives on Blended HTML, XHTML, and CSS19

20. XP Using Font Properties New Perspectives on Blended HTML, XHTML, and CSS20

21. XP Using the Font Shorthand Property Following the selector and the left-facing bracket, type font: on its own line, as shown in the following code: h2 { font: Type values for the font’s style, weight, variant, size, and family as applicable. Enter spaces between the values for the font properties. Enter commas between values for the font family. New Perspectives on Blended HTML, XHTML, and CSS21

22. XP Using the Font Shorthand Property The following code shows the syntax for a completed rule: h2 { font: normal bold 1.4em Verdana, Helvetica, sans-serif; } New Perspectives on Blended HTML, XHTML, and CSS22

23. XP Validating a File for CSS Code To validate a file to see if the CSS code meets the standard: – Open your browser and navigate to http://jigsaw.w3.org/css-validator – If necessary, click the By file upload tab – Click the Browse button. Navigate to the storage location of the file to be validated – Double-click the filename to enter it in the Local CSS file text box – Click the Check button New Perspectives on Blended HTML, XHTML, and CSS23

24. XP Validating a File for CSS Code New Perspectives on Blended HTML, XHTML, and CSS24