View
7
Download
0
Category
Preview:
Citation preview
Cascading Style
Sheets (CSS)Hamid Zarrabi-Zadeh
Web Programming – Fall 2013
Outline
• Motivation of CSS
• Using Style Sheets
• Inheritance and Cascade
• Formatting Text
Font properties
Text properties
• Summary
2
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
3
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
4
CSS History
Version Year
CSS 1 1996
CSS 2 1998
CSS 3 2011+
5
Using Style Sheets
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">
7
CSS Example8
<!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>
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 */
9
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 }
10
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
11
Hierarchy Selectors
• Ancestor and descendant
div p {…}
• Parent and child
div > p {…}
• Siblings
h1 + p {…}
12
Attribute Selectors
• Attributes
table[border="1"]
table[border]
[lang="en"]
[lang|="en"] (lang starts with "en")
[lang~="en"] (lang contains "en")
13
Inheritance & Cascade
CSS Inheritance
• Child elements inherit their parents' properties
For example, rows and cells of a table inherit the table's
background color
• Another Example:
15
p { border: 1px solid black; }
p.box { border-bottom: 1px dotted red; }
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; }
16
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
17
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
18
Styling Fonts
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
20
Generic Font Families
Serif Times New Roman
GeorgiaSerif 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 ConsoleAll monospace
characters have the
same width
21
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
22
p { font-size: 16px; }
h1 { font-size: large; }
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
23
P { font: italic small-caps bold 12pt serif; }
Styling Text
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
25
p { color: black; }
body { background-color: #eee; }
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)
26
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
27
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/
28
Recommended