Introduction HTML is limited in its capability of Style

Download Report

Transcript Introduction HTML is limited in its capability of Style 

Introduction
HTML is limited in its capability of
defining the Web page appearance
Style
– Rule that defines the appearance of an
element on a Web page
Style sheet
– Series of rules that define the style for a
Web page or a Web site
1
Introduction
Cascading Style Sheets (CSS)
– Allows a Web developer to write code
statements that control the style of
elements on a Web page
– CSS is not HTML
– Three types of style sheets
• Inline
• Embedded
• Linked
2
Creating Style Sheets
Inline style sheets allow you to change
the styles for one particular tag
Embedded style sheets allow you to
change several properties consistently
for the entire page
External style sheets allow you to
control the appearance of multiple
pages
3
Style Sheet Format
Style statement
– Selector – identifies the page element
– Declaration – identifies how the elements
should display
• Includes at least one property to apply to the
selected element
– Each property includes a related value
4
5
Style Sheet Format
6
Inline Style Sheets
Used to define a style for an individual
HTML tag
7
Embedded Style Sheets
Used to control the style of a single
Web page
8
External Style Sheets
Can control the look of many Web
pages
Text file with a .css extension
9
External Style Sheets
Use the <LINK> tag between the
<HEAD> tags to apply an external style
sheet
10
Working with Classes
in Style Sheets
Using classes, you can selectively apply
styles to HTML tags within a page
You can only define classes in embedded or
external style sheets
Defining styles is a two-step process
– Mark the elements in your HTML code that
belong to the class by adding the tag,
CLASS=classname
– Define a specific style for that class
11
Working with Classes
in Style Sheets
12
HTML Code with Classes Defined
13
Resulting Web Page
14
Summary
Describe the three different types of
cascading style sheets
Add an embedded style sheet to a
Web page that changes the link styles
Add an external style sheet that
changes the background, link styles,
paragraph text, and table styles
15
Summary
Use the <LINK> tag to insert a link to
an external style sheet
Add an inline style sheet to a Web
page that changes the text style
Understand how to define style classes
16
What You Should Know
17
HTML
Comprehensive Concepts and Techniques
Second Edition
Project 7 Complete