Tutorial 3 Introducing Cascading Style Sheets Objectives XP
Tutorial 3 Introducing Cascading Style Sheets
Objectives • • • XP 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 New Perspectives on Blended HTML, XHTML, and CSS 2
Introducing Cascading Style Sheets XP • 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 CSS 3
Understanding How Styles Are Written XP 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; } New Perspectives on Blended HTML, XHTML, and CSS 6
Understanding How Styles Are Written New Perspectives on Blended HTML, XHTML, and CSS XP 7
Working with Color XP • 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 CSS 8
Working with Color New Perspectives on Blended HTML, XHTML, and CSS XP 9
Creating an Embedded Style Sheet XP • An embedded style sheet is one in which the CSS code is written in the <head> section of an XHTML document • On a blank line in the <head> section of an XHTML document, type: <style type="text/css"> • Press the Enter key four times • Type the end </style> tag • Position the insertion point on the blank line between the start <style> and end </style> tags New Perspectives on Blended HTML, XHTML, and CSS 10
Creating an Embedded Style Sheet XP • The following code shows the syntax for an embedded style sheet: <style type="text/css">. . . CSS code is typed here. . . </style> New Perspectives on Blended HTML, XHTML, and CSS 11
Creating an Embedded Style Sheet New Perspectives on Blended HTML, XHTML, and CSS XP 12
Grouping Element Selectors XP • Grouped selectors are selectors with the same declarations grouped into a comma-separated list New Perspectives on Blended HTML, XHTML, and CSS 13
Using Descendant Selectors XP • A descendant selector is a selector nested within another selector New Perspectives on Blended HTML, XHTML, and CSS 14
Using Font Properties New Perspectives on Blended HTML, XHTML, and CSS XP 15
Using Font Properties XP • The font-variant property can make text appear in small caps New Perspectives on Blended HTML, XHTML, and CSS 16
Using Font Properties XP • 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 New Perspectives on Blended HTML, XHTML, and CSS – Percentage 17
Using Font Properties XP • 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 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 New Perspectives on Blended HTML, XHTML, and CSS XP 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: h 2 { 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: h 2 { font: normal bold 1. 4 em Verdana, Helvetica, sans-serif; } New Perspectives on Blended HTML, XHTML, and CSS 22
Validating a File for CSS Code XP • To validate a file to see if the CSS code meets the standard: – Open your browser and navigate to http: //jigsaw. w 3. 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 CSS 23
Validating a File for CSS Code New Perspectives on Blended HTML, XHTML, and CSS XP 24
- Slides: 24