ECA 228 Internet/Intranet Design I

1
ECA 228 Internet/Intranet Design I

• Cascading Style Sheets

2
background-color

• background-color ltcolor valuegt

body background-color red
3
background-image

• background-image lturlgt none

body background-imageurl( imageName.gif)
4
background-repeat

• background-repeat repeat repeat-x repeat-y
  no-repeat

body background-repeat repeat-x
5
background-attachment

• background-attachment scroll fixed

body background-attachment scroll
6
border-color

• border-color ltcolor valuegt

p.box border-color ff0000
7
border-style

• border-style none hidden dotted dashed
  solid double groove ridge inset outset

p.box border-style groove
8
border-width

• border-width thin medium thick ltlengthgt

p.box border-width thin
9
color

• color ltcolor valuegt

h3 color red
10
float

• float left right none

img.floatExample float right
11
font-family

• font-family ltspecific familygt ltgeneric
  familygt

h2 font-family Helvetica, Arial, sans-serif
12
font-style

• font-style normal italic oblique

p.italic font-style italic
13
font-size

• font-size ltlengthgt ltpercentagegt
  ltabsolute-sizegt ltrelative-sizegt

p.sizeExample font-size 2em
14
font-variant

• font-variant small-caps none

.sml font-variant small-caps
15
font-weight

• font-weight normal bold bolder lighter
  numeric values 1 - 9

p.bold font-weight bold
16
letter-spacing

• letter-spacing ltlengthgt

p letter-spacing 0.4em
17
line-height

• line-height ltmultipliergt ltpercentagegt
  ltabsolute valuegt

p line-height 1.5em
18
list-style-type

• list-style-type disc circle square
  decimal decimal-leading-zero lower-roman
  upper-roman lower-alpha upper-alpha none

ul list-style-type square ol ol
list-style-type lower-roman
19
list-style-image

• list-style-image lturlgt none

ol list-style-type url( imageName.gif )
20
list-style-position

• list-style-position inside outside

ol list-style-position inside
21
margin

• margin ltlengthgt ltpercentagegt
• ( margin-left, margin-top, margin-right,
  margin-bottom)

h1 margin-top .5em
22
padding

• padding ltlengthgt ltpercentagegt
• ( padding-left, padding-top, padding-right,
  padding-bottom)

h1 padding-top 2em
23
position

• position relative absolute left top
  right bottom

.imagePosition position absolute
left 0px top 0px
24
text-align

• text-align left right center justify

td text-align right
25
text-indent

• text-indent ltlengthgt ltpercentagegt

p text-indent 3em
26
text-decoration

• text-decoration none underline overline
  line-through blink

ahover text-decoration underline
27
text-transform

• text-transform capitalize uppercase
  lowercase none

ul text-transform capitalize
28
vertical-align

• vertical-align baseline sub super top
  middle bottom text-top text-bottom

td vertical-align top
29
white-space

• white-space ltpregt ltnowrapgt ltnormalgt

toc white-space nowrap
30
word-spacing

• word-spacing ltlengthgt

p word-spacing 0.4em
31
z-index

• z-index ltintegergthigher numbers are higher in
  the stack

.topImage z-index 4