Cascading Style Sheets, pt 2 ECA 225 Applied Online Programming
2 ECA225 Applied Interactive Programming background-color background-color: body { background-color: red; }
3 ECA225 Applied Interactive Programming background-image background-image: | none body { background-image:url( imageName.gif); }
4 ECA225 Applied Interactive Programming background-repeat background-repeat: repeat | repeat-x | repeat-y | no-repeat body { background-repeat: repeat-x; }
5 ECA225 Applied Interactive Programming background-attachment background-attachment: scroll | fixed body { background-attachment: scroll; }
6 ECA225 Applied Interactive Programming border-color border-color: p.box { border-color: #ff0000; }
7 ECA225 Applied Interactive Programming border-style border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset p.box { border-style: groove; }
8 ECA225 Applied Interactive Programming border-width border-width: thin | medium | thick | p.box { border-width: thin; }
9 ECA225 Applied Interactive Programming color color: h3 { color: red; }
10 ECA225 Applied Interactive Programming display display: none | block | inline | list-item a { display: block; }
11 ECA225 Applied Interactive Programming float float: left | right | none img.floatExample { float: right; }
12 ECA225 Applied Interactive Programming font-family font-family: | h2 { font-family: Helvetica, Arial, sans-serif; }
13 ECA225 Applied Interactive Programming font-style font-style: normal | italic | oblique p.italic { font-style: italic; }
14 ECA225 Applied Interactive Programming font-size font-size: | | | p.sizeExample { font-size: 2em; }
15 ECA225 Applied Interactive Programming font-variant font-variant: small-caps | none.sml { font-variant: small-caps; }
16 ECA225 Applied Interactive Programming font-weight font-weight: normal | bold | bolder | lighter | numeric values p.bold { font-weight: bold; }
17 ECA225 Applied Interactive Programming letter-spacing letter-spacing: p { letter-spacing: 0.4em; }
18 ECA225 Applied Interactive Programming line-height line-height: | | p { line-height: 1.5em; }
19 ECA225 Applied Interactive Programming 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; }
20 ECA225 Applied Interactive Programming list-style-image list-style-image: | none ol { list-style-type: url( imageName.gif ); }
21 ECA225 Applied Interactive Programming list-style-position list-style-position: inside | outside ol { list-style-position: inside; }
22 ECA225 Applied Interactive Programming margin margin: | ( margin-left, margin-top, margin-right, margin- bottom) h1 { margin-top:.5em; }
23 ECA225 Applied Interactive Programming padding padding: | ( padding-left, padding-top, padding-right, padding- bottom) h1 { padding-top: 2em; }
24 ECA225 Applied Interactive Programming position position: relative | absolute | left | top | right | bottom.imagePosition { position: absolute; left: 0px; top: 0px; }
25 ECA225 Applied Interactive Programming text-align text-align: left | right | center | justify td { text-align: right; }
26 ECA225 Applied Interactive Programming text-indent text-indent: | p { text-indent: 3em; }
27 ECA225 Applied Interactive Programming text-decoration text-decoration: none | underline | overline | line-through | blink a:hover { text-decoration: underline; }
28 ECA225 Applied Interactive Programming text-transform text-transform: capitalize | uppercase | lowercase | none ul { text-transform: capitalize; }
29 ECA225 Applied Interactive Programming vertical-align vertical-align: baseline | sub | super | top | middle | bottom | text-top | text-bottom td { vertical-align: top; }
30 ECA225 Applied Interactive Programming white-space white-space: | | #toc { white-space: nowrap; }
31 ECA225 Applied Interactive Programming word-spacing word-spacing: p { word-spacing: 0.4em; }
32 ECA225 Applied Interactive Programming z-index z-index: higher numbers are higher in the stack.topImage { z-index: 4; }