Embed Size (px)
Citation preview
Using CSS
Create a n
1. Ty
Heading 1Heading2ParagraphLink [presClass alignClass coloID yellowB
2. C3. In
4. C
5. C6. G7. In
8. C
9. C10. H11. G12. In
13. C
14. H
S for design
new html pag
ype
1 [press enter [press enter]h [press enterss enter] n_center [preor_red [press Bold [save filelick CSS new n the dialog b
a. Selectob. Selectoc. Rule D
new Sd. File na
ategory Tya. Font‐fb. Font‐sc. Font‐wd. Color =
lick the type o to CSS newn the dialog b
a. Selectob. Selectoc. Rule D
File naategory Ty
a. Font‐fb. Font‐sc. Color =
lick the type ighlight Parago to new CSSn the dialog b
a. Selectob. Selectoc. Rule D
File naategory Ty
a. Font‐fb. Font‐sc. 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 Filame: myStyleSype amily : Timesize : 36 px weight : Bold = #F60 “Heading 1” a
w rule ox or type: Tag or name: H2 Definition: ame: myStyleSype amily : Comicize :16 px = #CF0 “Heading 2” agraph S rule ox or type: Tag or name: P (sDefinition: ame: myStyleSype 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
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
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 winde 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 Iike <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 typllowBold”>ID
me.html”
s
hting the text
e id yellowBo
age
ged on both p
homework pa
your style.htm
your situation
pe yellowBoldD 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
