chapter4
A CSS Primer
html: structure & content
CSS: presentation & style
Deprecated elements
Once deprecated, tags may well become
obsolete
<font></font>
<b></b>
<i></i>
<u></u>
<strike></strike>
<center></center>
Slide 4-2
CSS terms
style rule
selector {property:value}
examples
h2 {color: red}
h3 {color: #FF0000; text-align:center}
p {color: navy; font-style:italic}
h1,h2,h3,h4,h5,h6
{
color:
green
}
Misc Resources folder/
110 web resources/css
Slide 4-3
Styles are stored in Style Sheets
external: separate file
internal: <style> element in head section
inline/local: style property in tag
Slide 4-4
internal style sheet
<head>
<style
type="text/css">
body
{background-color:
ivory;
color:
navy}
hr
{color:
sienna}
p
{font-family:”Verdana”}
</style>
</head>
Slide 4-5
Inline styles (a.k.a. local styles)
<h2
style=“color:red”>
Local
Styles
</h2>
<p
style="color:
sienna;
text-align:center">
x-ray
yankee
zulu
</p>
Slide 4-6
External Style Sheet
> Style
rules
stored
in
separate
file
(eg)
/110/css/[Link]
> Connected
to
a
client
file
using
a
link
element
Slide 4-7
External Style Sheet:
/110/css/[Link]
external
style
sheets
may
contain
only
> css
style
rules
> css
comments
(for
documentation)
>
no
HTML
allowed
omit
<style>
element
hr
{color:
sienna}
p
{color:
sienna;
text-align:center}
body
{background-image:
url(“../images/[Link]")}
Slide 4-8
Client File
/110/about/[Link]
clients connect to the style sheet using the
<link> tag.
The <link> tag goes inside the head section:
<head>
<link rel="stylesheet" type="text/css"
href=“../css/[Link]" />
</head>
Slide 4-9
External Style Sheets
CSS is a breakthrough in Web design:
separates structure (html) from presentation
(css)
control the style of multiple Web pages all at
once
Define styles in an external style sheet and
apply them to as many Web pages as you want
To make a global change, simply change the
style: all elements in the site are updated
automatically
Slide 4-10
Cascading Style Sheets
Multiple Styles Cascade Into One
Styles can be specified
o inline
o local
o external
Even multiple external style sheets can be
referenced inside a single HTML document
Slide 4-11
Cascading Order
What style will be used when there is more than one style
specified for an HTML element?
Styles will "cascade" by the following rules
(number 1 has the highest priority):
4. Inline style
5. Internal style sheet (<style> element in the <head>)
6. External style sheet
7. Browser default
So, an inline style (inside an HTML element) has the highest
priority, which means that it will override a style declared
inside the <head> tag, in an external style sheet, or in a
browser (a default value).
Slide 4-12
selectors:
1. simple.
2.
class.
3.
id
1.
simple: p
{font-family:”Verdana”}
2.
class:
[Link]
{text-align:
right}
.center
{text-align:
center}
<p
class="right">
This
paragraph
will
be
right-aligned.
</p>
<p
class="center">
This
paragraph
will
be
center-aligned.
</p>
<h2
class=“center”>
Zut
Alors!
</h2>
Slide 4-13
Selectors (cont.)
3. id selector:
h2#kermit
{color:
green}
#alert
{color:
red}
<h2 id=“kermit”> Bein’ Green! </h2>
<p id=“alert”> Caveat Lector! </p>
Slide 4-14
Descendant selectors
Problem: specify a CSS rule that “applies to
EM elements that are contained by an H1
element"
Example:
h1 { color: red }
em { color: red }
Slide 4-15
4. Descendant selectors
h1 { color: red }
em { color: red }
Although the intention of these rules is to
add emphasis to text by changing its color,
the effect will be lost in a case such as:
<h1>This headline is <EM>very</EM>
important</h1>
Slide 4-16
4. Descendant selectors
Add a rule that sets the text color to blue
whenever an em occurs anywhere within
an h1
h1 { color: red }
em { color: red }
h1 em { color: blue }
Slide 4-17
Descendant selectors
Problem: specify a CSS rule that “applies to
EM elements that are contained by an H1
element"
Example:
h1 { color: red }
em { color: red }
Slide 4-18
Classification of Elements:
Block-level, Inline, List-item
Block-Level Elements: Displayed on a line
by itself
p, h1, div, table, ol, ul, . . .
Can only be contained by other block-level
elements (with restrictions):
—p can be in a div
—p can not be in a p
Slide 4-19
Classification of Elements:
Block-level, Inline, List-item
Inline Elements: Do not begin on a new
line
a, em, span, img, …
Can be children of any other element
List-item Elements: appear in lists
Slide 4-20
CSS Display Property
display
values: block | inline | list-item | none
applies to: all elements
div#links a {display: block;}
return to proj12
Slide 4-21
CSS Box Model
> CSS assumes that every element is
contained in an element box
> E-M-B-P-C =
Edge-Margin-Border-Padding-Content
> The width of an element is the distance
from the left side of the content to the
right side of the content:
Slide 4-22
Example using a class selector
[Link] {
background-color:yellow; color:green;
border-style:double; border-color: green;
padding: 10px;
/* text-align applies only to the inline content of
a block-level element. To center the div itself,
use the following three properties */
margin-left:auto; margin-right:auto; width:50%;
}
Slide 4-23
CSS Resources
• [Link]
• Video: Beginner’s Guide to CSS
• Quick Tutorials from WestCiv
• Eric Meyer: CSS
Author of CSS: The Definitive Guide
Slide 4-24
