ECA 228 InternetIntranet Design I Cascading Style Sheets

  • Slides: 31
Download presentation
ECA 228 Internet/Intranet Design I Cascading Style Sheets

ECA 228 Internet/Intranet Design I Cascading Style Sheets

background-color l background-color: <color value> body { background-color: red; } ECA 228 Internet/Intranet Design

background-color l background-color: <color value> body { background-color: red; } ECA 228 Internet/Intranet Design I

background-image l background-image: <url> | none body { background-image: url( image. Name. gif); }

background-image l background-image: <url> | none body { background-image: url( image. Name. gif); } ECA 228 Internet/Intranet Design I

background-repeat l background-repeat: repeat | repeat-x | repeat-y | no-repeat body { background-repeat: repeat-x;

background-repeat l background-repeat: repeat | repeat-x | repeat-y | no-repeat body { background-repeat: repeat-x; } ECA 228 Internet/Intranet Design I

background-attachment l background-attachment: scroll | fixed body { background-attachment: scroll; } ECA 228 Internet/Intranet

background-attachment l background-attachment: scroll | fixed body { background-attachment: scroll; } ECA 228 Internet/Intranet Design I

border-color l border-color: <color value> p. box { border-color: #ff 0000; } ECA 228

border-color l border-color: <color value> p. box { border-color: #ff 0000; } ECA 228 Internet/Intranet Design I

border-style l border-style: none | hidden | dotted | dashed | solid | double

border-style l 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 l border-width: thin | medium | thick | <length> p. box { border-width:

border-width l border-width: thin | medium | thick | <length> p. box { border-width: thin; } ECA 228 Internet/Intranet Design I

color l color: <color value> h 3 { color: red; } ECA 228 Internet/Intranet

color l color: <color value> h 3 { color: red; } ECA 228 Internet/Intranet Design I

float l float: left | right | none img. float. Example { float: right;

float l float: left | right | none img. float. Example { float: right; } ECA 228 Internet/Intranet Design I

font-family l font-family: <specific family> | <generic family> h 2 { font-family: Helvetica, Arial,

font-family l font-family: <specific family> | <generic family> h 2 { font-family: Helvetica, Arial, sans-serif; } ECA 228 Internet/Intranet Design I

font-style l font-style: normal | italic | oblique p. italic { font-style: italic; }

font-style l font-style: normal | italic | oblique p. italic { font-style: italic; } ECA 228 Internet/Intranet Design I

font-size l font-size: <length> | <percentage> | <absolute-size> | <relative-size> p. size. Example {

font-size l font-size: <length> | <percentage> | <absolute-size> | <relative-size> p. size. Example { font-size: 2 em; } ECA 228 Internet/Intranet Design I

font-variant l font-variant: small-caps | none . sml { font-variant: small-caps; } ECA 228

font-variant l font-variant: small-caps | none . sml { font-variant: small-caps; } ECA 228 Internet/Intranet Design I

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

font-weight l font-weight: normal | bolder | lighter | numeric values 1 - 9 p. bold { font-weight: bold; } ECA 228 Internet/Intranet Design I

letter-spacing l letter-spacing: <length> p { letter-spacing: 0. 4 em; } ECA 228 Internet/Intranet

letter-spacing l letter-spacing: <length> p { letter-spacing: 0. 4 em; } ECA 228 Internet/Intranet Design I

line-height l line-height: <multiplier> | <percentage> | <absolute value> p { line-height: 1. 5

line-height l line-height: <multiplier> | <percentage> | <absolute value> p { line-height: 1. 5 em; } ECA 228 Internet/Intranet Design I

list-style-type l list-style-type: disc | circle | square | decimal-leading-zero | lower-roman | upper-roman

list-style-type l list-style-type: disc | circle | square | 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 l list-style-image: <url> | none ol { list-style-type: url( image. Name. gif );

list-style-image l list-style-image: <url> | none ol { list-style-type: url( image. Name. gif ); } ECA 228 Internet/Intranet Design I

list-style-position l list-style-position: inside | outside ol { list-style-position: inside; } ECA 228 Internet/Intranet

list-style-position l list-style-position: inside | outside ol { list-style-position: inside; } ECA 228 Internet/Intranet Design I

margin l margin: <length> | <percentage> ( margin-left, margin-top, margin-right, margin-bottom) h 1 {

margin l margin: <length> | <percentage> ( margin-left, margin-top, margin-right, margin-bottom) h 1 { margin-top: . 5 em; } ECA 228 Internet/Intranet Design I

padding l padding: <length> | <percentage> ( padding-left, padding-top, padding-right, paddingbottom) h 1 {

padding l padding: <length> | <percentage> ( padding-left, padding-top, padding-right, paddingbottom) h 1 { padding-top: 2 em; } ECA 228 Internet/Intranet Design I

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

position l position: relative | absolute | left | top | right | bottom . image. Position { position: absolute; left: 0 px; top: 0 px; } ECA 228 Internet/Intranet Design I

text-align l text-align: left | right | center | justify td { text-align: right;

text-align l text-align: left | right | center | justify td { text-align: right; } ECA 228 Internet/Intranet Design I

text-indent l text-indent: <length> | <percentage> p { text-indent: 3 em; } ECA 228

text-indent l text-indent: <length> | <percentage> p { text-indent: 3 em; } ECA 228 Internet/Intranet Design I

text-decoration l text-decoration: none | underline | overline | line-through | blink a: hover

text-decoration l text-decoration: none | underline | overline | line-through | blink a: hover { text-decoration: underline; } ECA 228 Internet/Intranet Design I

text-transform l text-transform: capitalize | uppercase | lowercase | none ul { text-transform: capitalize;

text-transform l text-transform: capitalize | uppercase | lowercase | none ul { text-transform: capitalize; } ECA 228 Internet/Intranet Design I

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

vertical-align l vertical-align: baseline | sub | super | top | middle | bottom | text-top | text-bottom td { vertical-align: top; } ECA 228 Internet/Intranet Design I

white-space l white-space: <pre> | <nowrap> | <normal> #toc { white-space: nowrap; } ECA

white-space l white-space: <pre> | <nowrap> | <normal> #toc { white-space: nowrap; } ECA 228 Internet/Intranet Design I

word-spacing l word-spacing: <length> p { word-spacing: 0. 4 em; } ECA 228 Internet/Intranet

word-spacing l word-spacing: <length> p { word-spacing: 0. 4 em; } ECA 228 Internet/Intranet Design I

z-index l z-index: <integer> higher numbers are higher in the stack . top. Image

z-index l z-index: <integer> higher numbers are higher in the stack . top. Image { z-index: 4; } ECA 228 Internet/Intranet Design I