Lecture 3: CSS

Outline
IS400: Development of Business Applications on the Internet

Fall 2004
Instructor: Dr. Boris Jukic
CSS: Cascading Style

Sheets
Objectives
Topics covered:
using a style sheet to give all the pages of a Web site the
same look and feel.
style sheet types and cascade precedence
CSS syntax for assigning style properties
Class selector and using the class attribute to apply
styles.
using style sheets to separate presentation from content.
Introduction
Cascading
Style Sheets (CSS)
Separation of structure from presentation

Relationship between the style formatting and the
structure/content is no longer 1:1
multiple
style sheets can be applied to the same Web
page
Same style sheet can be applied to the multiple Web
page
Multiple Levels of Style Definition

Cascade
Precedence: resolves conflicting

style rules
Inline style sheets

Embedded sheets
External style sheets
Author
vs. User
Inline Styles
style
information is directly attached to the

HTML elements they affect
higher cascade precedence than the other
specification methods
declaring an individual elements format:
Attribute style
CSS (style) property
Followed
by a colon and a value
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
Outline
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5


7
8
9
10
11
inline.html
(1 of 2)
<html xmlns = "http://www.w3.org/1999/xhtml">

<head>
<title>Inline Styles</title>
</head>
12
13
<body>
14
15
<p>This text does not have any style applied to it.</p>
16
17

18

19

20
<p style = "font-size: 20pt">This text has the
21
<em>font-size</em> style applied to it, making it 20pt.
22
</p>
23
24
<p style = "font-size: 20pt; color: #0000ff">
25
This text has the <em>font-size</em> and
26
<em>color</em> styles applied to it, making it
27
20pt. and blue.</p>
28
29
</body>
30 </html>
Outline
Embedded Style Sheets
this method can only specify style information for the current
document:
1:1 relationship
However, the same document may have other style definitions
applied to it
1:M relationship
embedded style sheet rule will have higher precedence than

external style sheet rule, if there is a conflict between styles
embedded style sheet rule will have lower precedence than
an inline style sheet rule
Embedded Style Sheets
Embed an entire CSS document in an XHTML documents

head section inside a style element
Attribute type
Multipurpose
Internet Mail Extensions (MIME) type

describes the type of the documents content
text/css is the type for CSS document
Style properties are defined for:

defined elements, such as p (paragraph), h3 (header),
li (Iist) or any other
Style class that can be applied to either:
Existing
Any existing type of element in the body of the document or

One specific element in the document
CSS Syntax for Assigning Style

Properties
The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property: value}
A selector can be:
the HTML element/tag you wish to define. In this example:
body {color: black} , element body is the selector
The class selector, which can be tied to a specific element, such as:
p.right {text-align: right}
The class selector applicable to any element, such as:
.loud {font-family: fantasy; font-size: xx-large}
If a class selector is used, it has to be invoked in the body of the

XHTML document:
<p class="right"> or
<table class=loud>
CSS Syntax for Assigning Style

Properties: additional issues
Group selectors are possible for a group of HTML elements. For example:
h1,h2,h3,h4,h5,h6 {color: green} will make all header elements

text green
When a class selector is defined for a particular element, it can not

be invoked on other elements. Using example from the previous slide
which of these uses of class styles in the XHTML document is
correct?
<ul class = loud>
<ul class = right>
Pseudo-class selectors define the style for the parts of a document

based on some characteristics other than tag name, attributes or
content. They may be defined by a user action such as:
Mouseover (hover pseudoclass)
Clicking (active pseudoclass)
CSS syntax: continue

Invoking
a style class to a block of text not

defined by a particular element
span element
div element (block level element)
Style Inheritance and Conflict

Resolution
Inheritance
An element that is present within another element

(child) inherits all style properties from its parent
element
However, if such child (or descendant) element
has properties that conflict with defined properties
of its parent element, conflict is resolved in favors
of properties of a child element
Child
element properties have greater specificity than

ancestors properties
Outline
4
5

7
8
9
10
-->
declared.html
(1 of 3)

<head>
<title>Style Sheets</title>
11
12

13
<style type = "text/css">
14
15
em
16
{ background-color: #8000ff;
color: white }
17
18
h1
{ font-family: arial, sans-serif }
{ font-size: 14pt }
19
20
21
22
.special { color: blue }
23
24
25
</style>
</head>
Style Class selector:

applicable to any element in
this document
26
27
Outline
<body>
28
29

30
<h1 class = "special">Deitel & Associates, Inc.</h1>
31
Style Class special

invoked for h1 element
32
<p>Deitel & Associates, Inc. is an internationally
33
recognized corporate training and publishing organization
34
specializing in programming languages, Internet/World
35
Wide Web technology and object technology education.
36
Deitel & Associates, Inc. is a member of the World Wide
37
Web Consortium. The company provides courses on Java,
38
C++, Visual Basic, C, Internet and World Wide Web
39
programming, and Object Technology.</p>
declared.html
(2 of 3)
40
41
<h1>Clients</h1>
42
<p class = "special"> The company's clients include many
43
<em>Fortune 1000 companies</em>, government agencies,
44
branches of the military and business organizations.
45
Through its publishing partnership with Prentice Hall,
46
Deitel & Associates, Inc. publishes leading-edge
47
programming textbooks, professional books, interactive
48
CD-ROM-based multimedia Cyber Classrooms, satellite
49
courses and World Wide Web courses.</p>
50
Style Class special

invoked for p element
51
</body>
52 </html>
Outline
color Conflict resolution

between parent element p
and child element em
Outline
4
5

-->
7
8
9
10
<head>
<title>More Styles</title>
11
12
advance.html
(1 of 3)
13
14
a.nodec
{ text-decoration: none }
a:hover
{ text-decoration: underline;
15
16
17
color: red;
18
background-color: #ccffcc }
19
20
li em
21
{ color: red;
font-weight: bold }
22
23
24
ul
{ margin-left: 75px }
Style Class: applicable only to

element a in this document
Pseudoclass: applicable only to
element a in this document. (note
different syntax)
This is NOT a group selector. It declares that this

specific style is applicable to em elements inside an
li element
25
ul ul
26
margin-left: 15px }
27
28
29
</style>
</head>
30
31
<body>
advance.html
(2 of 3)
32
33
<h1>Shopping list for <em>Monday</em>:</h1>
34
35
<ul>
36
<li>Milk</li>
37
<li>Bread
38
<ul>
39
<li>White bread</li>
40
<li>Rye bread</li>
41
<li>Whole wheat bread</li>
42
</ul>
43
</li>
44
<li>Rice</li>
45
<li>Potatoes</li>
46
<li>Pizza <em>with mushrooms</em></li>
47
48
</ul>
Outline
49
<p><a class = "nodec" href = "http://www.food.com">
50
Go to the Grocery store</a></p>
51
52
</body>
53 </html>
Outline
External Style Sheets
External style sheets

Applicable to more than document
Documents can have more than one source for style
specification
M:M relationship
Can provide uniform look and feel to entire site
Same CSS syntax rules for assigning and invoking style
properties apply
External Style Sheets
Location (href) and type (type) of the external style sheet are specified
as attributes of a link element in the head portion of an XHTML
document
In addition, the rel attribute specifies the nature of the relationship
between the stylesheet and the document that is referencing it
Persistent stylesheets must be applied to the document
Preferred style sheet should be applied the unless the user has
selected a different alternate
Alternate style sheets may be selected by users depending on their
preferences
Linking External Style Sheets
To make a style sheet persistent, set the rel attribute to

"stylesheet".
To make a style sheet preferred, set the rel attribute to

"stylesheet" and name the style sheet with the additional
title attribute.
To specify an alternate style sheet, set the rel attribute to

"alternate stylesheet" and name the style sheet with the title
attribute.
/* Fig. 6.4: styles.css
/* An external stylesheet */
*/
Outline
3
4
{ text-decoration: none }
5
6
a:hover { text-decoration: underline;
color: red;
background-color: #ccffcc }
9
10 li em
{ color: red;
11
font-weight: bold;
12
background-color: #ffffff }
13
14 ul
{ margin-left: 2cm }
15
16 ul ul
17
margin-left: .5cm }
styles.css
(1 of 1)
4
5


7
8
9
external.html
(1 of 2)

<head>
10
<title>Linking External Style Sheets</title>
11
<link rel = "stylesheet" type = "text/css"
12
13
href = "styles.css" />

</head>
14
15
<body>
16
17
<h1>Shopping list for <em>Monday</em>:</h1>
18
<ul>
19
<li>Milk</li>
20
<li>Bread
21
<ul>
22
<li>White bread</li>
23
<li>Rye bread</li>
24
<li>Whole wheat bread</li>
25
</ul>
Outline
26
</li>
27
<li>Rice</li>
28
<li>Potatoes</li>
29
<li>Pizza <em>with mushrooms</em></li>
30
</ul>
31
32
<p>
33
<a href = "http://www.food.com">Go to the Grocery store</a>
34
</p>
35
36
</body>
37 </html>
Outline
W3C CSS Validation Service

Validates
external CSS documents

Ensures that style sheets are syntactically
correct
http://jigsaw.w3.org/css-validator/
6.10 Text Flow and the Box Model
Floating
Move an element to one side of the screen
Box model
Margins
Padding
Border
4
5

7
8
9
10
floating.html
(1 of 3)

<head>
<title>Flowing Text Around Floating Elements</title>
11
12
-->
13
14
div { background-color: #ffccff;
15
margin-bottom: .5em;
16
font-size: 1.5em;
17
width: 50% }
18
19
{ text-align: justify }
20
21
</style>
22
23
24
</head>
Outline
25
<body>
26
27
28
<div style = "text-align: center">

Deitel & Associates, Inc.</div>
29
30
<div style = "float: right; margin: .5em;
31
text-align: right">
32
Corporate Training and Publishing</div>
33
floating.html
(2 of 3)
34
<p>Deitel & Associates, Inc. is an internationally
35
recognized corporate training and publishing organization
36
specializing in programming languages, Internet/World
37
Wide Web technology and object technology education.
38
The company provides courses on Java, C++, Visual Basic, C,
39
Internet and World Wide Web programming, and Object Technology.</p>
40
41
<div style = "float: right; padding: .5em;
42
text-align: right">
43
Leading-Edge Programming Textbooks</div>
44
45
<p>The company's clients include many Fortune 1000
46
companies, government agencies, branches of the military
47
and business organizations.</p>
48
Outline
49
<p style = "clear: right">Through its publishing
50
partnership with Prentice Hall, Deitel & Associates,
51
Inc. publishes leading-edge programming textbooks,
52
professional books, interactive CD-ROM-based multimedia
53
Cyber Classrooms, satellite courses and World Wide Web
54
courses.</p>
55
56
</body>
57 </html>
Outline
Text Flow and the Box Model

Margin
Content
Border
Padding
4
5

7
8
9
10
borders.html
(1 of 2)

<head>
<title>Borders</title>
11
12
-->
13
14
body
{ background-color: #ccffcc }
div
{ text-align: center;
15
16
17
margin-bottom: 1em;
18
padding: .5em }
19
20
.thick
{ border-width: thick }
21
22
.medium { border-width: medium }
23
24
25
.thin
{ border-width: thin }
Outline
26
.groove { border-style: groove }
27
28
.inset
{ border-style: inset }
29
30
.outset { border-style: outset }
31
32
.red
{ border-color: red }
.blue
{ border-color: blue }
33
34
35
36
37
</style>
borders.html
(2 of 2)
</head>
38
39
<body>
40
41
<div class = "thick groove">This text has a border</div>
42
<div class = "medium groove">This text has a border</div>
43
<div class = "thin groove">This text has a border</div>
44
45
<p class = "thin red inset">A thin red line...</p>
46
<p class = "medium blue outset">
47
And a thicker blue line</p>
48
49
</body>
50 </html>
Outline
User Style Sheets

Format
pages based on user preferences

User style sheets are not linked in the
document
They are set in browser's options
4
5


7
8
9
10
User_absolute.html
(1 of 2)

<head>
<title>User Styles</title>
11
12
13
14
.note { font-size: 9pt }
15
16
17
</style>
</head>
18
19
<body>
20
21
<p>Thanks for visiting my Web site. I hope you enjoy it.
22
</p><p class = "note">Please Note: This site will be
23
moving soon. Please check periodically for updates.</p>
Outline
24
25
</body>
26 </html>
Outline
/* Fig. 6.17: userstyles.css */
/* A user stylesheet
*/
3
4
body
{ font-size: 20pt;
color: yellow;
background-color: #000080 }
Outline
User Style Sheets
Fig. 6.18
User style sheet in Internet Explorer 6.
User Style Sheets
4
5


7
8
9
10
User_relative.html
(1 of 2)

<head>
<title>User Styles</title>
11
12
13
14
.note { font-size: .75em }
15
16
17
</style>
</head>
18
19
<body>
20
21
<p>Thanks for visiting my Web site. I hope you enjoy it.
22
</p><p class = "note">Please Note: This site will be
23
moving soon. Please check periodically for updates.</p>
Outline
24
25
</body>
26 </html>
Outline
User Style Sheets
Fig. 6.21
User style sheet applied with em measurement.

Lecture 3: CSS

Uploaded by

Copyright:

Available Formats

Lecture 3: CSS

Uploaded by

Document Information

Original Description:

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

Lecture 3: CSS

Uploaded by

Copyright:

Available Formats

Outline

IS400: Development of Business Applications on the Internet

CSS: Cascading Style

Style Sheets (CSS)

Separation of structure from presentation

style sheets can be applied to the same Web

Multiple Levels of Style Definition

Precedence: resolves conflicting

Inline style sheets

information is directly attached to the

by a colon and a value

<?xml version = "1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

<!-- Using inline styles

<html xmlns = "http://www.w3.org/1999/xhtml">

<p>This text does not have any style applied to it.</p>

<!-- inline styles. Separate multiple styles

<!-- with a semicolon.

<p style = "font-size: 20pt">This text has the

<em>font-size</em> style applied to it, making it 20pt.

<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>

Embedded Style Sheets

embedded style sheet rule will have higher precedence than

Embedded Style Sheets

Embed an entire CSS document in an XHTML documents

Internet Mail Extensions (MIME) type

Style properties are defined for:

Any existing type of element in the body of the document or

CSS Syntax for Assigning Style

If a class selector is used, it has to be invoked in the body of the

CSS Syntax for Assigning Style

h1,h2,h3,h4,h5,h6 {color: green} will make all header elements

When a class selector is defined for a particular element, it can not

Pseudo-class selectors define the style for the parts of a document

CSS syntax: continue

a style class to a block of text not

Style Inheritance and Conflict

An element that is present within another element

element properties have greater specificity than

<?xml version = "1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

<!-- Fig. 6.2: declared.html

<html xmlns = "http://www.w3.org/1999/xhtml">

<style type = "text/css">

{ font-family: arial, sans-serif }

.special { color: blue }

Style Class selector:

<h1 class = "special">Deitel & Associates, Inc.</h1>

Style Class special

<p>Deitel &amp; Associates, Inc. is an internationally

<p>Deitel & Associates, Inc. is an internationally

Deitel & Associates, Inc. is a member of the World Wide

Deitel & Associates, Inc. publishes leading-edge

<p>Deitel & Associates, Inc. is an internationally