ECA 228 Internet/Intranet Design I

Cascading Style Sheets

ECA 228 Internet/Intranet Design I

background-color

background-color: <color value>

body { background-color: red; }

ECA 228 Internet/Intranet Design I

background-image

background-image: <url> | none

body { background-image:url( imageName.gif); }

ECA 228 Internet/Intranet Design I

background-repeat

background-repeat: repeat | repeat-x | repeat-y | no-repeat

body { background-repeat: repeat-x; }

ECA 228 Internet/Intranet Design I

background-attachment

background-attachment: scroll | fixed

body { background-attachment: scroll; }

ECA 228 Internet/Intranet Design I

border-color

border-color: <color value>

p.box { border-color: #ff0000; }

ECA 228 Internet/Intranet Design I

border-style

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

p.box { border-style: groove; }

ECA 228 Internet/Intranet Design I

border-width

border-width: thin | medium | thick | <length>

p.box { border-width: thin; }

ECA 228 Internet/Intranet Design I

color

color: <color value>

h3 { color: red; }

ECA 228 Internet/Intranet Design I

float

float: left | right | none

img.floatExample { float: right; }

ECA 228 Internet/Intranet Design I

font-family

font-family: <specific family> | <generic family>

h2 { font-family: Helvetica, Arial, sans-serif; }

ECA 228 Internet/Intranet Design I

font-style

font-style: normal | italic | oblique

p.italic { font-style: italic; }

ECA 228 Internet/Intranet Design I

font-size

font-size: <length> | <percentage> | <absolute-size> | <relative-size>

p.sizeExample { font-size: 2em; }

ECA 228 Internet/Intranet Design I

font-variant

font-variant: small-caps | none

.sml { font-variant: small-caps; }

ECA 228 Internet/Intranet Design I

font-weight

font-weight: normal | bold | bolder | lighter | numeric values 1 - 9

p.bold { font-weight: bold; }

ECA 228 Internet/Intranet Design I

letter-spacing

letter-spacing: <length>

p { letter-spacing: 0.4em; }

ECA 228 Internet/Intranet Design I

line-height

line-height: <multiplier> | <percentage> | <absolute value>

p { line-height: 1.5em; }

ECA 228 Internet/Intranet Design I

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; }

ECA 228 Internet/Intranet Design I

list-style-image

list-style-image: <url> | none

ol { list-style-type: url( imageName.gif ); }

ECA 228 Internet/Intranet Design I

list-style-position

list-style-position: inside | outside

ol { list-style-position: inside; }

ECA 228 Internet/Intranet Design I

margin

margin: <length> | <percentage>

( margin-left, margin-top, margin-right, margin-bottom)

h1 { margin-top: .5em; }

ECA 228 Internet/Intranet Design I

padding

padding: <length> | <percentage> ( padding-left, padding-top, padding-right, padding-

bottom)

h1 { padding-top: 2em; }

ECA 228 Internet/Intranet Design I

position

position: relative | absolute | left | top | right | bottom

.imagePosition { position: absolute;

left: 0px; top: 0px;

}

ECA 228 Internet/Intranet Design I

text-align

text-align: left | right | center | justify

td { text-align: right; }

ECA 228 Internet/Intranet Design I

text-indent

text-indent: <length> | <percentage>

p { text-indent: 3em; }

ECA 228 Internet/Intranet Design I

text-decoration

text-decoration: none | underline | overline | line-through | blink

a:hover { text-decoration: underline; }

ECA 228 Internet/Intranet Design I

text-transform

text-transform: capitalize | uppercase | lowercase | none

ul { text-transform: capitalize; }

ECA 228 Internet/Intranet Design I

vertical-align

vertical-align: baseline | sub | super | top | middle | bottom | text-top | text-bottom

td { vertical-align: top; }

ECA 228 Internet/Intranet Design I

white-space

white-space: <pre> | <nowrap> | <normal>

#toc { white-space: nowrap; }

ECA 228 Internet/Intranet Design I

word-spacing

word-spacing: <length>

p { word-spacing: 0.4em; }

ECA 228 Internet/Intranet Design I

z-index

z-index: <integer>higher numbers are higher in the stack

.topImage { z-index: 4; }