Tutorial 03
advertisement
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;
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
• Type the CSS code
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
Percentage
New Perspectives on Blended HTML, XHTML, and CSS
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:
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
XP
• 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 CSS
23
Validating a File for CSS Code
New Perspectives on Blended HTML, XHTML, and CSS
XP
24
