Presentation is loading. Please wait.

Presentation is loading. Please wait.

Cascading Style Sheets, pt 2 ECA 225 Applied Online Programming.

Similar presentations


Presentation on theme: "Cascading Style Sheets, pt 2 ECA 225 Applied Online Programming."— Presentation transcript:

1 Cascading Style Sheets, pt 2 ECA 225 Applied Online Programming

2 2 ECA225 Applied Interactive Programming background-color  background-color: body { background-color: red; }

3 3 ECA225 Applied Interactive Programming background-image  background-image: | none body { background-image:url( imageName.gif); }

4 4 ECA225 Applied Interactive Programming background-repeat  background-repeat: repeat | repeat-x | repeat-y | no-repeat body { background-repeat: repeat-x; }

5 5 ECA225 Applied Interactive Programming background-attachment  background-attachment: scroll | fixed body { background-attachment: scroll; }

6 6 ECA225 Applied Interactive Programming border-color  border-color: p.box { border-color: #ff0000; }

7 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 8 ECA225 Applied Interactive Programming border-width  border-width: thin | medium | thick | p.box { border-width: thin; }

9 9 ECA225 Applied Interactive Programming color  color: h3 { color: red; }

10 10 ECA225 Applied Interactive Programming display  display: none | block | inline | list-item a { display: block; }

11 11 ECA225 Applied Interactive Programming float  float: left | right | none img.floatExample { float: right; }

12 12 ECA225 Applied Interactive Programming font-family  font-family: | h2 { font-family: Helvetica, Arial, sans-serif; }

13 13 ECA225 Applied Interactive Programming font-style  font-style: normal | italic | oblique p.italic { font-style: italic; }

14 14 ECA225 Applied Interactive Programming font-size  font-size: | | | p.sizeExample { font-size: 2em; }

15 15 ECA225 Applied Interactive Programming font-variant  font-variant: small-caps | none.sml { font-variant: small-caps; }

16 16 ECA225 Applied Interactive Programming font-weight  font-weight: normal | bold | bolder | lighter | numeric values 1 - 9 p.bold { font-weight: bold; }

17 17 ECA225 Applied Interactive Programming letter-spacing  letter-spacing: p { letter-spacing: 0.4em; }

18 18 ECA225 Applied Interactive Programming line-height  line-height: | | p { line-height: 1.5em; }

19 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 20 ECA225 Applied Interactive Programming list-style-image  list-style-image: | none ol { list-style-type: url( imageName.gif ); }

21 21 ECA225 Applied Interactive Programming list-style-position  list-style-position: inside | outside ol { list-style-position: inside; }

22 22 ECA225 Applied Interactive Programming margin  margin: | ( margin-left, margin-top, margin-right, margin- bottom) h1 { margin-top:.5em; }

23 23 ECA225 Applied Interactive Programming padding  padding: | ( padding-left, padding-top, padding-right, padding- bottom) h1 { padding-top: 2em; }

24 24 ECA225 Applied Interactive Programming position  position: relative | absolute | left | top | right | bottom.imagePosition { position: absolute; left: 0px; top: 0px; }

25 25 ECA225 Applied Interactive Programming text-align  text-align: left | right | center | justify td { text-align: right; }

26 26 ECA225 Applied Interactive Programming text-indent  text-indent: | p { text-indent: 3em; }

27 27 ECA225 Applied Interactive Programming text-decoration  text-decoration: none | underline | overline | line-through | blink a:hover { text-decoration: underline; }

28 28 ECA225 Applied Interactive Programming text-transform  text-transform: capitalize | uppercase | lowercase | none ul { text-transform: capitalize; }

29 29 ECA225 Applied Interactive Programming vertical-align  vertical-align: baseline | sub | super | top | middle | bottom | text-top | text-bottom td { vertical-align: top; }

30 30 ECA225 Applied Interactive Programming white-space  white-space: | | #toc { white-space: nowrap; }

31 31 ECA225 Applied Interactive Programming word-spacing  word-spacing: p { word-spacing: 0.4em; }

32 32 ECA225 Applied Interactive Programming z-index  z-index: higher numbers are higher in the stack.topImage { z-index: 4; }


Download ppt "Cascading Style Sheets, pt 2 ECA 225 Applied Online Programming."

Similar presentations


Ads by Google