Introducing Cascading Style Sheets: Principles of Web Design, Third Edition

Introducing Cascading Style Sheets
Principles of Web Design, Third Edition

Objectives
• Understand CSS style rules
• Build a basic style sheet
• Understand the cascade
• Use basic selection techniques
• Use advanced selection techniques
Principles of Web Design, Third Edition 2

Why use styles?
• Separation of content from presentation
• Why is this a good idea?
– Ensure all pages in a site share the same
style consistently
– Change look of site easily
– Ease of site maintenance,
• change a definition once for that change to apply
across all documents that use it

Understanding CSS Style Rules
• In CSS style rules express the style
characteristics for an XHTML element. A set of
style rules is called a style sheet.
• Cascading style sheets offer much greater
control over type characteristics than does the
<font> element
• You can use standard type conventions, such as
using point or pixel sizes, setting leading, and
specifying indents and alignment
Understanding CSS Style Rules
• Style rules are composed of two parts: a

selector and a declaration
• The selector determines the element to which
the rule is applied
• The declaration details the exact property values

<body>
<h1>Title</h1>
</body>
XHTML:
<h1><font color=“red”> Title </font><h1>

CSS Basics
• Three ways to combine CSS rules and XHTML
– The style attribute (place CSS rules inside XHTML tag

in XHTML file) – inline
– The <style> element (place CSS rules in <head>

section in the XHTML file) - internal
– External style sheet (place CSS rules to another .css

file)

Combining CSS Rules with XHTML
• The style attribute - inline
• Defines a style for a single element
• Generally used to override a style set at a higher
level in the document for a single element
• Only affects one instance of an element in a
document
<h1 style=“color: blue”>Title<h1>

XHTML tag
<h1><font color=“blue”> Title </font><h1>

The <style> element - internal
• Always contained in the <head> section of the
document
• Generally used to override a style set at a
higher level in the document for a single
document
• Only affects the document in which it resides
<head>
<title> sample document</title> The value “text/css”
<style type=“text/css”> defines the style
h1 {color: red;} language as
</style></head> Cascading Style Sheets
<body>
<h1>section title1</h1>
…….
<h1>section title2</h1>
External style sheet
• /* ……….. */ adding comments in CSS
h1 {color: white; background-color: green;}

color.css h2 {color: red;} /* the sub-head color */

External style sheet
• Linking to an external style sheet
– <link> element establishes document
relationships –between linked and current doc
• Can only be used in the <head> section of a
document
• Tells the browser where to find the external style
sheet
• The advantage of using an external style
sheet:
– Placing style sheets in an external document lets
you specify rules for multiple Web pages.

sample.xhtml with color.css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-
20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> sample document</title>
<link type="text/css" href="color.css" rel="stylesheet"/>
</head>
The rel attribute specifies the relationship

<body>
between the linked and current Docs
<h1>Section Title1</h1>
</body>
</html>
sample.xhtml (Internal)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-
20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> sample document</title>
<style type="text/css">
h1{color: white; background-color: green;}
h2{color: red;}
</style>
</head>
<body>
</body>
</html>
basic.htm
<head>
<title>A Basic Document</title>
h1 {text-align: center;}
p {font-family: sans-serif;}
</style>
</head>
<body>
<h1>CSS Basics</h1>
<p>CSS is based on a syntax)…..</p>
</body>

<h1>
<p>

Understanding Inheritance
• Based on hierarchical structure of
documents
– CSS rules inherit from parent elements to
child elements:
• thus <li> elements will inherit style rules from
<ul> elements unless a style rule is specifically
set for the <li> element

<style type=“text/css”>
h1 {color: red;}
p {color: red;}
ul {color: red;}
em {color: red;}
li {color: red;}
</style>
<style type=“text/css”>
body {color: red;}
</style>

Understanding Basic Selection Techniques
• Using type selectors

• Grouping selectors
• Combining declarations
• Using descendant selectors

Using Type Selectors
The selector determines the element to which a style
declaration is applied. Type selector apply the rule to
every instance of the element in the document. (<h2>, <p>,
< body>)
This rule selects the <h1> element in the document

and sets the text color to red. The following rule
selects the H1 element:

Grouping Selectors
To make your style rule more concise, you can
group selectors to which the same rules apply.
The following rule selects the H1 and H2 elements:
<style type=”text/css”>
h1, h2 {color: green;}
</style>

Combining Declarations
In many instances you want to state multiple
property declarations for the same selector.
The following style rules set the <p> element to
12-point blue text:
p {color: blue;}
p {font-size: 12pt;}
These two style rules can be expressed in a simpler
way:
p {color: blue; font-size: 12pt;}
Using Descendant Selectors
A descendant selector lets you specify the exact context in which a style
is applied.
To specify that <b> elements appear blue only within <p> elements, use
the following rule:
p b {color: blue;}
</style>
ul li b {color: blue;}
</style>
descendant.xhtml
<head>
<title>Descendant</title>
p b {color: blue;}
</style>
</head>
<body>
<p>CSS is based on a syntax that is designed
to be easy to <b>write</b> and
<b>read</b>.</p>
<div>With CSS, you write style rules that
<b>select</b> an HTML element and
<b>declare</b> style characteristics for
the element.</div>
</body>
Using the Basic Selection Techniques
(oz1.htm)
<head>
<title>The Wizard of OZ by Frank L.
Baum</title>
<style>
h3 {text-align: right; color: gray;}
h1, h2 {margin-left: 20px; font-family:sans-
serif;}
h1 {border: 1px solid; padding: 5px;}
p {margin-left: 20px; font-family: serif;
font-size: 14pt;}
</style>
</head>
oz1.htm
<body>
<h3>An excerpt from The Wizard of OZ</h3>
<h2>Chapter 1</h2>
<h1>The Cyclone</h1>
<p>From the far north they heard a low wail
of the wind, ………...</p>
<p>Suddenly Uncle Henry stood up.</p>
<p>"There's a cyclone coming, Em," he called
to his wife. ………...</p>
<p>Aunt Em dropped her work and came to the
door. ……….</p>
<p>"Quick, Dorothy!" she screamed. …</p>
</body>
oz1.htm
h3 {text-align: right;
h1, h2 {margin-left: 20px; color: gray;}
font-family:sans-serif;}
h1 {border: 1px solid;

padding: 5px;}
p {margin-left: 20px;
font-family: serif;
font-size: 14pt;}
Understanding Advanced Selection Techniques
• You will learn to select elements of an XHTML

document using the following methods:
– Using the class attribute
– Using the <div> and <span> elements

Using the class Attribute Selector
• The class attribute lets you write rules and then apply
them to groups of elements that you have classified
• The core attributes are id, class, style, and title, and
they apply to all XHTML elements.
• To create a class, declare it within the <style> element
first. The period (.) flag character indicates that the
selector is a class selector.

Using the class Attribute Selector
.special {font-size: 10pt; font-weight: bold;}
<p class=”special”>This is the first paragraph of

the document. It has a different style based on the
“special” class selector.</p>

Making class Selectors More Specific
• Using the class attribute is a powerful selection

technique
– It allows you to write style rules with names that are
meaningful to your organization or information type.
– The more specific your class names become, the
greater control you need over the way they are
applied.
• Using the <div> and <span> Elements
– The <div> (division) and <span> (span of words)
elements are designed to be used with CSS.

Working With <div>
• The <div> element lets you specify logical

divisions within a document that have their own
name and style properties
• <div> is a block-level element. It contains a
leading and trailing carriage return.
• You can use <div> with the class attribute to
create customized block-level elements

Working With <div>
To create a division, declare it within the <style> element first. The
following example specifies a division named introduction as the
selector for the rule:
div.introduction {color:red;}
</style>
OR
.introduction {color:red;}
</style>

Working With <div>
• Next, specify the <div> element in the XHTML document. Then use the class attribute to specify
the exact type of division.
• In the following example, the code defines the <div> element as the special class named
“introduction.”
<div class=“introduction”>Some text</div>

Working with <span>
• The <span> element lets you specify inline
elements within a document that have their own
name and style properties
• Inline elements go within the line of text, like the
<b> element
• The difference between <div> and <span>
– The difference between <div> and <span> is
their element display type. <div> is a block-level
element, and <span> is its inline equivalent.

Working with <span>
To create a span, declare it within the <style> element first. The following
example specifies a <span> element named “logo” as the selector for the rule:
span.logo {color:red;}
</style>

Working with <span>
• Next, specify the <span> element in the document.
• Then use the class attribute to specify the exact type of span.
• In the following example, the code defines the <span> element as the
special class named “logo.”

Working with <span>
<head> section
span.logo {color:red;}
</style>
<body> section
Welcome to the <span class=“logo”>Wonder
Software</span> Web site.

Selecting by class and id
• div.works p{color:green} ( <div class="works"> )

Selects only p elements within div elements with
class attribute set to value ‘works’
• div#assets p{color:red} ( <div id=“assets"> )
Selects only p elements within the div element
with id set to ‘assets’
• div.works and div#assets referred to as the
context of the selector rule

Why Did They Choose Those
Names?
• ID = A person's Identification (ID) is
unique to one person.
• Class = There are many people in a class.
• A class can be used several times, while
an ID can only be used once
• You should use classes for items that you
know you're going to use a lot.

Introducing Cascading Style Sheets: Principles of Web Design, Third Edition

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introducing Cascading Style Sheets: Principles of Web Design, Third Edition

Uploaded by

Copyright:

Available Formats

Introducing Cascading Style Sheets

Principles of Web Design, Third Edition

Principles of Web Design, Third Edition 2

Principles of Web Design, Third Edition 3

• Style rules are composed of two parts: a

Principles of Web Design, Third Edition 5

<h1><font color=“red”> Title </font><h1>

Principles of Web Design, Third Edition 6

– The style attribute (place CSS rules inside XHTML tag

– The <style> element (place CSS rules in <head>

– External style sheet (place CSS rules to another .css

Principles of Web Design, Third Edition 7

<h1 style=“color: blue”>Title<h1>

<h1><font color=“blue”> Title </font><h1>

Principles of Web Design, Third Edition 8

h1 {color: white; background-color: green;}

Principles of Web Design, Third Edition 10

Principles of Web Design, Third Edition 11

The rel attribute specifies the relationship

Principles of Web Design, Third Edition 15

Principles of Web Design, Third Edition 16

Principles of Web Design, Third Edition 17

Principles of Web Design, Third Edition 18

• Using type selectors

Principles of Web Design, Third Edition 19

This rule selects the <h1> element in the document

Principles of Web Design, Third Edition 20

The following rule selects the H1 and H2 elements:

Principles of Web Design, Third Edition 21

h1 {border: 1px solid;

• You will learn to select elements of an XHTML

Principles of Web Design, Third Edition 29

Principles of Web Design, Third Edition 30

<p class=”special”>This is the first paragraph of

Principles of Web Design, Third Edition 31

• Using the class attribute is a powerful selection

Principles of Web Design, Third Edition 32

• The <div> element lets you specify logical

Principles of Web Design, Third Edition 33

Principles of Web Design, Third Edition 34

<div class=“introduction”>Some text</div>

Principles of Web Design, Third Edition 35

Principles of Web Design, Third Edition 36

Principles of Web Design, Third Edition 37

• Next, specify the <span> element in the document.

Principles of Web Design, Third Edition 38

Principles of Web Design, Third Edition 39

• div.works p{color:green} ( <div class="works"> )

Principles of Web Design, Third Edition 40

Principles of Web Design, Third Edition 41

You might also like