Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Style-sheets (CSS)
Outline
Understand the basic concept of
CSS
Understand the differences
among inline, internal and
external style sheets
Understand how to declare a
style
1. Cascading Style
Sheet
All web pages can be broken
down into bucketed content
areas
These areas can be updated by
changing the code on every
page
- or By using cascading style sheets!
Basharat Mahm ood, Department
of Computer Science,
CIIT,Islamabad, Pakistan
1.2 Advantages of
Style Sheets
Saves time
Easy to change
Keep consistency
Give you more control over
layout
Use styles with JavaScript
Make it easy to create a common
format for all the Web pages
Basharat Mahm ood, Department
of Computer Science,
CIIT,Islamabad, Pakistan
2. Writing Style
Sheets
In-line styles
Embedded/internal styles
External style sheet
Color setting
Font size
setting
Style attribute
CSS styled
heading
h1 {color:red; font-family:sansserif}
</style>
Basharat Mahm ood, Department
of Computer Science,
CIIT,Islamabad, Pakistan
10
Color
setting
Font
family
End of
style
Simple
heading
Basharat Mahm ood, Department
of Computer Science,
CIIT,Islamabad, Pakistan
11
12
13
14
15
Style
declaration
16
Style-sheet is
included
Heading
17
18
19
3. CSS Syntax
20
21
A rule consists of
22
23
24
25
26
27
To apply a style
<tag CLASS=class_name>
<h1 CLASS=FirstHeader>IU</h1>
28
29
30
OR
31
Summary
CSS basics
CSS writing option
CSS rules
Id,s and Classes
32
References
Chapter 7, Beginning HTML,
XHTML,CSS, and JavaScript, by
Jon Duckett, Wiley Publishing;
2009, ISBN: 978-0-470-54070-1.
33