Transcript Chapter 11
The Web Warrior Guide to
Web Design Technologies
Chapter 11
Cascading Style Sheets: Part I
Objectives
•
•
•
•
•
Write your first style sheet
Use basic CSS syntax
Combine style rules with your HTML code
Use CSS selectors to apply style rules
Use the <div> and <span> elements with
CSS style rules
Introducing Cascading Style
Sheets
• CSS was invented by the World Wide Web
Consortium
• CSS is an easy-to-use style language that
lets you use familiar desktop publishing
terminology to control the appearance of
Web pages
• You can use CSS to control typography,
colors, backgrounds, and other design
characteristics
Browser Support for Cascading
Style Sheets
• The only drawback to working with CSS is
the lack of support in older browsers
• To enjoy all the benefits of Web pages
created with CSS, the user needs a newer
browser
• Netscape users need version 6.0 or
above; Internet Explorer users need
version 5.0 or above
Understanding Style Rules
• CSS syntax is designed to be easy to write
and read
• The main components of CSS syntax are
<style> tags and their associated style
rules
• You write style rules that select an HTML
element and then declare style
characteristics for the element
Understanding Style Rules
• The style rule is composed of two parts: a
selector and a declaration
• The selector determines the element to
which the rule is applied
• The declaration specifies the exact
property values to be applied to the
element
Understanding Style Rules
• The declaration contains a property and a
value
• The property is a quality or characteristic,
such as color, font size, or margin,
followed by a colon (:)
• The value is the precise specification of
the property, such as blue for color, 12 pt
(point) for font size, or 30 px (pixels) for
margin, followed by a semicolon (;)
Understanding Style Rules
• The style rules you write are contained in
a style sheet
• An external style sheet is a stand-alone
document that is shared by a number of
Web pages
• Alternately, your style sheet can be
contained within a single Web page,
controlling the styles for that page only
Combining CSS Rules with HTML
You can combine CSS rules with HTML
code in the following three ways:
• The style attribute
• The <style> element
• An external style sheet
Using the Style Attribute
• The style attribute is an HTML attribute
that can be used with any HTML element
• You can define the style for a single
element by using the style attribute
Style Attribute Code Sample
<p style="font-weight:
bold;">Use the style attribute
to change the style of this
paragraph with a CSS style
rule.</p>
Using the <style> Element
• The <style> element is always contained
in the <head> section of the document
• Style rules contained in the <style>
element only affect the document in which
they reside
Style Element Code Sample
<style type="text/css">
body {font-family: arial;}
h1 {color: red;}
</style>
Linking to an External Style Sheet
• An external style sheet is a text document
containing style rules
• You can create one external style sheet
whose style rules affect all the pages on a
Web site
• When you want to update a style, you only
have to change the style rule once in the
external style sheet
External Style Sheet Code Sample
<head>
<title>A Basic Document</title>
<link href="Ch11CSS03.css"
rel="stylesheet" type="text/css">
</head>
CSS Comments
• CSS allows comments within the <style>
element or in an external style sheet, as
shown in the following example:
/* This is the basic style sheet */
Basic Selection Techniques
•
•
•
•
Using type selectors
Grouping selectors
Combining declarations
Using descendant selectors
Using Type Selectors
• A type selector applies the rule to every
instance of the element in the document,
as shown in the following rules:
body {color: gray;}
H2 {color: red;}
p {font-size: 10pt;}
Grouping Selectors
• To make your style rules more concise,
you can group type selectors for which the
same rules apply:
h1, h2 {color: red;}
Using Descendant Selectors
• This selector lets you select elements that
are the descendants of other elements.
The following rule selects only <b>
elements that are contained within <p>
elements:
p b {color: blue;}
Advanced Selection Techniques
• Using the class selector
• Working with the <div> element
• Working with the <span> element
Using the Class Selector
• The class selector lets you write a style
rule, assign it a name, and then apply that
name to any elements you choose
• To apply the style rule to an element, you
add the class attribute to the element and
set it to the name you have specified
Class Selector
Applying the Class
• After you create a style rule containing a
class selector, you add it to the document
by using the class attribute, as shown in
the following code
<p class="quote">This text will
appear red with a 30 pixel
margin.</p>
Using the <div> and <span>
elements
• The <div> (division) and <span> (span of
words) elements in HTML are designed to
be used with the CSS class selector
• They let you specify logical divisions within
a document that have their own class
name and style properties
Using the <div> and <span>
elements
• The difference between <div> and <span>
is their element display type
• <div> is a block-level element
• <span> is its inline equivalent
<div> Code Sample
div.introduction {font-size:
14pt; margin: 24pt; textindent: 28pt;}
<span> Code Sample
span.logo {color: white;
background-color: black;}
Summary
• CSS is a style language that lets you gain
visual control over the display of your Web
content
• CSS was poorly supported by browsers at
first, but now it is becoming widely
supported
• A style sheet is a collection of style rules
Summary
• A style rule defines style characteristics for
an HTML element
– It consists of a selector and a declaration
• The declaration consists of a property and a value
• You can combine CSS style rules with
your HTML documents in three different
ways – with the style attribute, or with
internal or external style sheets