Chapter 6 - Cascading Style Sheets™ (CSS)
Download
Report
Transcript Chapter 6 - Cascading Style Sheets™ (CSS)
Cascading Style Sheets™ (CSS)
Outline
5.1
5.2
5.3
5.4
5.5
5.6
Introduction
Inline Styles
Embedded Style Sheets
Conflicting Styles
Linking External Style Sheets
Web Resources
1
Objectives
In this lesson, you will learn:
To control the appearance of a Web site by
creating style sheets.
To use a style sheet to give all the pages of a
Web site the same look and feel.
To use the class attribute to apply styles.
To use style sheets to separate presentation from
content.
2
5.1 Introduction
Cascading Style Sheets (CSS)
Separation of structure from presentation
Three methods of CSS:
Inline Styles
Embedded Style Sheets
Conflicting Styles
Linking External Style Sheets
3
5.2 Inline Styles
Declare an individual element’s format
Attribute style
CSS property followed by a colon and a value
i.e: style = “font-size:20pt”
4
Example1: Inline styles: inline.html
<body>
The style attribute allows you to declare inline styles.
Separate multiple styles with a semicolon.
<p>This text does not have any style applied to it.</p>
<p style = "font-size: 20pt">This text has the
<em>font-size</em> style applied to it, making it 20pt.
</p>
<p style = "font-size: 20pt; color: #0000ff">
This text has the <em>font-size</em> and
<em>color</em> styles applied to it,
making it 20pt. and blue.</p>
</body>
5
5.3 Embedded Style Sheets
Embed an entire CSS document in an XHTML document’s
head section
Attributes
MIME type
type = “text/css”
Property
Description
Multipurpose
Internet Mail Extensions (MIME) type
Describes a file’s content
Description
background-color
Specifies the background color
font-family
Specifies the name of the font to use
font-size
Specifies a 14-point font
6
Example2: Embedded style sheets: declared.html
<head>
this begins the style sheet section
<style type = "text/css">
em
{ background-color: #8000ff; color: white }
h1
{ font-family: arial, sans-serif }
p
{ font-size: 14pt }
.special { color: blue }
</style>
</head>
<h1 class = "special">Deitel & Associates, Inc.</h1>
<p>Deitel & Associates, Inc. ..
programming, and Object Technology.</p>
<h1>Clients</h1>
<p class = "special"> The company's clients include
many <em>Fortune 1000 companies</em>,
government agencies, branches ….
and World Wide Web courses.</p>
7
5.4 Conflicting Styles
Inheritance
Descendant’s properties have greater specificity
than ancestor’s properties
8
Example3: Inheritance in style sheets: advanced.html
<style type = "text/css">
a.nodec { text-decoration: none }
a:hover { text-decoration: underline;color: red;background-color: #ccffcc }
li em { color: red;font-weight: bold }
ul
{ margin-left: 75px }
ul ul { text-decoration: underline; margin-left: 15px }
</style>
<h1>Shopping list for <em>Monday</em>:</h1>
<ul>
<li>Milk</li>
<li>Bread
<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</li>
<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>
<p><a class = "nodec" href = "http://www.food.com">Go to the Grocery store</a></p>
9
Example3: Inheritance in style sheets: advanced.html
<style type = "text/css">
a.nodec { text-decoration: none }
a:hover { text-decoration: underline;color: red;background-color: #ccffcc }
li em { color: red;font-weight: bold }
ul
{ margin-left: 75px }
ul ul { text-decoration: underline; margin-left: 15px }
</style>
<h1>Shopping list for <em>Monday</em>:</h1>
<ul>
<li>Milk</li>
<li>Bread
<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</li>
<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>
<p><a class = "nodec" href = "http://www.food.com">Go to the Grocery store</a></p>
10
5.5 Linking External Style Sheets
External style sheets
Can provide uniform look and feel to entire site
11
Example4: External style sheets: styles.css
a
{ text-decoration: none }
a:hover { text-decoration: underline; color: red;
background-color: #ccffcc }
li em { color: red; font-weight: bold; background-color: #ffffff }
ul
{ margin-left: 2cm }
ul ul { text-decoration: underline; margin-left: .5cm }
12
Example4: Linking external style sheets: external.html
<head>
<link rel = "stylesheet" type = "text/css" href = "styles.css" />
</head>
<body>
<h1>Shopping list for <em>Monday</em>:</h1>
<ul>
<li>Milk</li>
<li>Bread
<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</li>
<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>
<p>
<a href = "http://www.food.com">Go to the Grocery store</a>
</p>
</body>
13
14
5.6 Web Resources
www.w3.org/TR/css3-roadmap
www.ddj.com/webreview/style
tech.irt.org/articles/css.htm
15