This document provides instructions for using CSS to style an HTML page. It describes how to: 1. Create an HTML page with headings, paragraphs and links then link an external CSS stylesheet. 2. Create CSS rules to style headings, paragraphs and links with formatting like font, size, color and alignment. 3. Apply CSS classes and IDs to elements on the HTML page to see how the stylesheet styles are rendered. The goal is to learn how to separate style from structure using an external CSS stylesheet to control formatting and presentation of an HTML page.

1. Using CSS
Create a n
1. Ty
Heading 1
Heading2
Paragraph
Link [pres
Class align
Class colo
ID yellowB
2. C
3. In
4. C
5. C
6. G
7. In
8. C
9. C
10. H
11. G
12. In
13. C
14. H
S for design
new html pag
ype
1 [press enter
[press enter]
h [press enter
ss enter]
n_center [pre
or_red [press
Bold [save file
lick CSS new
n the dialog b
a. Selecto
b. Selecto
c. Rule D
new S
d. File na
ategory Ty
a. Font‐f
b. Font‐s
c. Font‐w
d. Color =
lick the type
o to CSS new
n the dialog b
a. Selecto
b. Selecto
c. Rule D
File na
ategory Ty
a. Font‐f
b. Font‐s
c. Color =
lick the type
ighlight Parag
o to new CSS
n the dialog b
a. Selecto
b. Selecto
c. Rule D
File na
ategory Ty
a. Font‐f
b. Font‐s
c. Color =
ighlight link
a. Create
ge – save as st
r]
]
r]
ess enter]
enter]
e]
rule
ox
or type: Tag
or name: H1
Definition:
Style Sheet Fil
ame: myStyleS
ype
amily : Times
ize : 36 px
weight : Bold
= #F60
“Heading 1” a
w rule
ox
or type: Tag
or name: H2
Definition:
ame: myStyleS
ype
amily : Comic
ize :16 px
= #CF0
“Heading 2” a
graph
S rule
ox
or type: Tag
or name: P (s
Definition:
ame: myStyleS
ype
amily : Arial,
ize :12 px
= #333
e a link to abo
tyles.html (th
le
Sheet.css
s New Roman
and apply H1
Sheet.css
c SansMS, cur
and apply H2
should be sele
Sheet.css
Helvetica, san
out_me.html
his is the page
, Times, serif
formatting fr
rsive
formatting fr
ected because
ns_serif
e where we w
rom the prop
rom the prop
e we are in a
will test our st
perty window
perty window
<P> tag alrea
tyles)
w
w
ady

2. Using CSS for design
b. Go to page properties
i. Link color: #090
ii. Rollover link color: #C60
iii. Visited link color: #CCC
iv. Active link color: #FCO
c. Click CSS style – you now have >myStyleSheet.css and > <style>
d. Open <style>
i. Right click on a:link
ii. Move CSS rule
iii. Move to External Style Sheet
iv. Choose Style Sheet myStyleSheet.css
v. Repeat for the rest of the link style – KEEP them in the order they appear or
they will not work correctly
15. Click on new CSS rule
16. In the dialog box
a. Selector type: class
b. Selector name: align_center
c. Rule Definition:
File name: myStyleSheet.css
17. Category Type
a. Font‐family : Arial, Helvetica, sans_serif
b. Font‐size :12 px
c. Color = #333
18. Category Block
a. Text‐align : center
b. Click ok
19. Apply class align_center to the line “class align_center
20. Click new CSS Rule
21. In the dialog box
a. Selector type: class
b. Selector name: color_red
c. Rule Definition:
File name: myStyleSheet.css
22. Category Type
a. Color = #F00
23. Highlight “class color_red“
a. Apply class color_red
24. Click new CSS Rule
25. In the dialog box
a. Selector type: ID
b. Selector name: #yellowBold
c. Rule Definition:
File name: myStyleSheet.css
26. Category Type
a. Font‐weight : Bold
b. Color = #FC0
27. Highlight “Id yellowBold”
We could skip this as
it is in a paragraph.
We skipped the font information so
we can apply this to any tag.
This code will only be applied to the
id named yellowBold

3. Using CSS
Save ALL
28. C
29. A
30. N
Here
31. In
32. C
33. C
34. C
35. C
Take a loo
what colo
36. O
37. O
38. U
S for design
a. In the
the co
reate a new p
ttach a style
a. Brows
b. Add as
ow type a pa
a. H1 for
b. H2 for
c. Create
d. Create
e. Create
is why we use
n the CSS win
lick the penci
hange the co
lick on yellow
hange the co
ok at both pag
or you were u
On your style p
On the homew
pload to the
property win
de will look li
page – file na
sheet
e to find myS
s link
age about you
r the title
r a subtitle
e some red te
e a paragraph
e a link back t
e CSS
dow click on
il to edit
lor to #960
wBold
lor to #360
ges your style
sing again.
page create a
work page cre
server (if app
ndow where I
ike <p id=”ye
me “about_m
StyleSheet.css
u using
ext by highligh
h that uses the
o the style pa
p
es have chang
a link to your
eate a link to y
propriate for y
D is none typ
llowBold”>ID
me.html”
s
hting the text
e id yellowBo
age
ged on both p
homework pa
your style.htm
your situation
pe yellowBold
D yellowBold<
t and applying
old
pages. You no
age
ml page
n)
d
</p>
g the red clas
o longer have
s
e to remembeer