Upload
zion-biller
View
223
Download
0
Tags:
Embed Size (px)
Citation preview
1
Lesson 5 Introduction to Cascading Style Sheets
HTML and JavaScript BASICS, 4th Edition
Barksdale / Turner
Le
sso
n 5
Barksdale / Turner HTML and JavaScript BASICS 4E22
Objectives
Create a Cascading Style Sheet. Control hyperlink behavior with CSS. Create style classes. Share style classes among Web pages. Control HTML table appearance with CSS.
Le
sso
n 5
Barksdale / Turner HTML and JavaScript BASICS 4E33
Vocabulary
active cascading style Cascading Style Sheet .css CSS files hover
look and feel normal style style class style sheets visited
Le
sso
n 5
Barksdale / Turner HTML and JavaScript BASICS 4E44
Introduction
A style is simply a collection of one or more attributes that are applied to the visual components of a Web page.
A cascading style is a collection of one or more attributes that can be specified once within the header of a Web page and then applied to many instances of a particular tag.
Le
sso
n 5
Barksdale / Turner HTML and JavaScript BASICS 4E55
Creating Cascading Style Sheets
A Cascading Style Sheet is a collection of one or more cascading style codes that has been extracted from the header of a Web page and stored in a separate file in a specific (CSS) format.
CSS makes it possible to customize the appearance and behavior of the Web site simply by changing the values in the style sheets.
Le
sso
n 5
Barksdale / Turner HTML and JavaScript BASICS 4E66
Creating Cascading Style Sheets (continued)
Web page using a Cascading Style Sheet
By convention, Cascading Style Sheet files are always given a .css extension.
Le
sso
n 5
Barksdale / Turner HTML and JavaScript BASICS 4E77
Exploring Hyperlink Styles
There are four possible states of a link. The normal state of a hyperlink is the way it
appears when the mouse pointer is not over it and it has never been clicked.
The hover state defines the link’s appearance when the mouse pointer is over it but has not yet been clicked.
Le
sso
n 5
Barksdale / Turner HTML and JavaScript BASICS 4E88
Exploring Hyperlink Styles (continued)
A link’s active state is when it has the focus on a Web page and pressing the mouse button gives it focus.
The visited state specifies a link’s appearance after it has been clicked at least once.
Le
sso
n 5
Barksdale / Turner HTML and JavaScript BASICS 4E99
Exploring Hyperlink Styles (continued)
By default, many popular browsers display text hyperlinks in an underlined, blue font.
Navigation bar with hover, active, and visited links
Le
sso
n 5
Barksdale / Turner HTML and JavaScript BASICS 4E1010
Working with Style Classes
CSS technology allows you to define style classes that can be applied to certain tags without affecting other tags of the same type.
A style class is a named group of attributes that are defined in a Cascading Style Sheet and that can be applied to specified tags within an HTML document.
Le
sso
n 5
Barksdale / Turner HTML and JavaScript BASICS 4E1111
Sharing Style Classes
All that is required for two or more Web pages to share a style class is for these Web pages to link in the style sheet in which the style class is defined.
Although not a requirement, this is often done when the Web pages sharing the class are all displayed in a common frameset.
Le
sso
n 5
Barksdale / Turner HTML and JavaScript BASICS 4E1212
Exploring Table Styles
Tables support a variety of attributes that are used to define column widths, border thickness and style and other table features.
HTML table using style classes
Le
sso
n 5
Barksdale / Turner HTML and JavaScript BASICS 4E1313
Exploring Table Styles (continued)
Because it is common for Web designers to want different tables on their Web pages to have different attributes, this is a perfect opportunity to make use of style classes.
Le
sso
n 5
Barksdale / Turner HTML and JavaScript BASICS 4E1414
Summary
In this lesson, you learned: How to create a Cascading Style Sheet. How to control hyperlink behavior with CSS. How to create style classes. How to share style classes among Web
pages. How to control HTML table appearance with
CSS.