Tutorial 3 Introducing Cascading Style Sheets

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 New Perspectives on Blended HTML, XHTML, and CSS 2

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

XP New Perspectives on Blended HTML, XHTML, and CSS 3

• Understanding How Styles Are

XP

• • • • 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 CSS 4

Creating a CSS Style

XP

• • 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 CSS 5

Creating a CSS Style

XP

• 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; property: value; }

New Perspectives on Blended HTML, XHTML, and CSS 6

Understanding How Styles Are Written

XP New Perspectives on Blended HTML, XHTML, and CSS 7

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

XP New Perspectives on Blended HTML, XHTML, and CSS 8

Working with Color

XP New Perspectives on Blended HTML, XHTML, and CSS 9

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: tag Position the insertion point on the blank line between the start tags Type the CSS code

XP New Perspectives on Blended HTML, XHTML, and CSS 10

Creating an Embedded Style Sheet • The following code shows the syntax for an embedded style sheet:

XP New Perspectives on Blended HTML, XHTML, and CSS 11

Creating an Embedded Style Sheet

XP New Perspectives on Blended HTML, XHTML, and CSS 12

Grouping Element Selectors • Grouped selectors are selectors with the same declarations grouped into a comma-separated list

XP New Perspectives on Blended HTML, XHTML, and CSS 13

Using Descendant Selectors • A descendant selector is a selector nested within another selector

XP New Perspectives on Blended HTML, XHTML, and CSS 14

Using Font Properties

XP New Perspectives on Blended HTML, XHTML, and CSS 15

Using Font Properties • The font-variant property can make text appear in

small caps XP New Perspectives on Blended HTML, XHTML, and CSS 16

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

XP New Perspectives on Blended HTML, XHTML, and CSS 17

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

XP New Perspectives on Blended HTML, XHTML, and CSS 18

Using Font Properties

XP

• • 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 CSS 19

Using Font Properties

XP New Perspectives on Blended HTML, XHTML, and CSS 20

Using the Font Shorthand Property

XP

• • • • 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 CSS 21

Using the Font Shorthand Property

XP

• 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 CSS 22

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

XP New Perspectives on Blended HTML, XHTML, and CSS 23

Validating a File for CSS Code

XP New Perspectives on Blended HTML, XHTML, and CSS 24