Cascading Style
Sheets (CSS)
Hamid Zarrabi-Zadeh
Web Programming – Fall 2013
2
Outline
• Motivation of CSS
• Using Style Sheets
• Inheritance and Cascade
• Formatting Text
Font properties
Text properties
• Summary
3
Why CSS?
• HTML, if used correctly, should only describe the
content of a document, not its formatting
• CSS (Cascading Style Sheet), added to HTML 4.0,
is for formatting side of the web
• CSS defines how HTML elements should be
displayed
4
CSS Advantages
• Separates document layout from its content
Document author can focus on content
Graphic designer can focus on layout
• A single file can control the look of the entire
website
Easy to modify the look without affecting content
- See CSS Zen Garden
Easy to obtain a consistent look
• Can easily support different platforms/devices
5
CSS History
Version
Year
CSS 1
1996
CSS 2
1998
CSS 3
2011+
Using Style Sheets
7
Using CSS
• Inline Styles
<p style="color: blue">
• Internal Style Sheets
<style>
p { color: blue; }
</style>
• External Style Sheets
<link rel="stylesheet" type="text/css" href="style.css">
8
CSS Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align: center;}
p {color: gray;}
</style>
</head>
<body>
<h1>My Heading</h1>
<p>This is a simple paragraph</p>
</body>
</html>
9
CSS Syntax
• A CSS rule has two main parts:
a selector
one or more declarations
• Syntax
selector {
property: value;
property: value; …
}
• Comments
/* this is a comment */
10
Selectors
• Name selector
p, h1 { color: blue; }
• The id selector
#main { color: red; }
• The class selector
.center { text-align: center; }
p.center { text-align: center; }
• Universal selector
* { margin: 0 }
11
Div and Span
• HTML has two tags, div and span, that are
specifically used with CSS and class and id
attributes
• A <div> element contains a block of text
Like a paragraph, section heading, or title
• A <span> element contains a short piece of text
within a block
Like a code inside a text
12
Hierarchy Selectors
• Ancestor and descendant
div p {…}
• Parent and child
div > p {…}
• Siblings
h1 + p {…}
13
Attribute Selectors
• Attributes
table[border="1"]
table[border]
[lang="en"]
[lang|="en"] (lang starts with "en")
[lang~="en"] (lang contains "en")
Inheritance & Cascade
15
CSS Inheritance
• Child elements inherit their parents' properties
For example, rows and cells of a table inherit the table's
background color
• Another Example:
p { border: 1px solid black; }
p.box { border-bottom: 1px dotted red; }
16
CSS Cascade
• When there are more than one style for an
element, they are cascaded in this order:
Browser defaults
External style sheets
Internal style sheets
Inline styles
• An exception can be forced using !important
p { font-weight: bold !important; }
17
Specificity
• More specific selectors have precedence over
others
p { color: blue; }
div p { color: red; }
• Calculating Specificity
A = number of id attributes in the selector
B = number of other attributes and pseudo-classes
C = number of element names and pseudo-elements
Specificity = ABC
18
Specificity Examples
*
A=0 B=0 C=0
specificity = 0
p
A=0 B=0 C=1
specificity = 1
div p
A=0 B=0 C=2
specificity = 2
ul ol+li
A=0 B=0 C=3
specificity = 3
h1 + *[title]
A=0 B=1 C=1
specificity = 11
ul ol li.red
A=0 B=1 C=3
specificity = 13
li.red.level
A=0 B=2 C=1
specificity = 21
#column
A=1 B=0 C=0
specificity = 100
Styling Fonts
20
Typeface
• We can use font-family property to specify
typeface
• The value is a comma-separated list of font
names
p { font-family: Arial, Verdana, serif; }
• Browsers will try fonts in order and use first
available
21
Generic Font Families
Serif
Times New Roman
Georgia
Serif fonts have small
lines at the ends on
some characters
Sans-serif
Arial
Verdana
"Sans" means without these fonts do not
have the lines at the
ends of characters
Monospace
Courier New
Lucida Console
All monospace
characters have the
same width
22
Font Size
• Specified in one of the CSS size units
– 1em is the width of a letter m
– 1pt is a standard typographic point (1/72 inches)
– 1px is one screen pixel
– Keywords: x-small, small, medium, large, x-large,
smaller, larger
– Percentages: n% relative to the surrounding
p { font-size: 16px; }
h1 { font-size: large; }
23
Font Style
• font-style:
Can be one of normal, italic, or oblique
• font-weight:
Can be one of normal, bold, bolder, lighter, 100, ..., 900
• font-variant:
Can be normal or small-caps
• font:
A shortcut to set all properties
P { font: italic small-caps bold 12pt serif; }
Styling Text
25
Color
• A color can be specified by:
Color name
blue, red
HEX value
#ff6600, #f60
RGB value
rgb(255,0,0)
• Color properties:
color
background-color
p { color: black; }
body { background-color: #eee; }
26
Other Text Properties
• text-align:
Can be one of left, right, center, or justify
• text-decoration:
Can be none, underline, overline, line-through, or blink
• text-indent:
Examples: 1em, 1cm, 1mm, 1ex (height of a letter x)
• text-transform:
Can be none, capitalize, uppercase, or lowercase
• direction:
Can be either ltr or rtl (for right to left text)
27
Summary
• We can use CSS to control the style of an entire
website at once
• CSS provides fine-grained control over fonts and
text
• We can apply styles to elements using various
selectors, such as hierarchy selectors
• In practice, many web designers ignore most
HTML tags, and only use <div> and <span> in
conjunction with CSS
28
References
• HTML, XHTML, and CSS Bible
By S. M. Schafer, 5th Edition, 2010.
• W3Schools
http://www.w3schools.com/html
• Internet Programming by Pat Morin
http://cg.scs.carleton.ca/~morin/teaching/2405/
© Copyright 2026 Paperzz