Tutorial 3 Introducing Cascading Style Sheets

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 – 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

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