Presentation is loading. Please wait.

Presentation is loading. Please wait.

ECA 228 Internet/Intranet Design I Cascading Style Sheets.

Similar presentations


Presentation on theme: "ECA 228 Internet/Intranet Design I Cascading Style Sheets."— Presentation transcript:

1 ECA 228 Internet/Intranet Design I Cascading Style Sheets

2 ECA 228 Internet/Intranet Design I background-color background-color: body { background-color: red; }

3 ECA 228 Internet/Intranet Design I background-image background-image: | none body { background-image:url( imageName.gif); }

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

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

6 ECA 228 Internet/Intranet Design I border-color border-color: p.box { border-color: #ff0000; }

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

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

9 ECA 228 Internet/Intranet Design I color color: h3 { color: red; }

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

11 ECA 228 Internet/Intranet Design I font-family font-family: | h2 { font-family: Helvetica, Arial, sans-serif; }

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

13 ECA 228 Internet/Intranet Design I font-size font-size: | | | p.sizeExample { font-size: 2em; }

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

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

16 ECA 228 Internet/Intranet Design I letter-spacing letter-spacing: p { letter-spacing: 0.4em; }

17 ECA 228 Internet/Intranet Design I line-height line-height: | | p { line-height: 1.5em; }

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

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

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

21 ECA 228 Internet/Intranet Design I margin margin: | ( margin-left, margin-top, margin-right, margin-bottom) h1 { margin-top:.5em; }

22 ECA 228 Internet/Intranet Design I padding padding: | ( padding-left, padding-top, padding-right, padding- bottom) h1 { padding-top: 2em; }

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

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

25 ECA 228 Internet/Intranet Design I text-indent text-indent: | p { text-indent: 3em; }

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

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

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

29 ECA 228 Internet/Intranet Design I white-space white-space: | | #toc { white-space: nowrap; }

30 ECA 228 Internet/Intranet Design I word-spacing word-spacing: p { word-spacing: 0.4em; }

31 ECA 228 Internet/Intranet Design I z-index z-index: higher numbers are higher in the stack.topImage { z-index: 4; }


Download ppt "ECA 228 Internet/Intranet Design I Cascading Style Sheets."

Similar presentations


Ads by Google