Presentation is loading. Please wait.

Presentation is loading. Please wait.

/k/k 1212 Cascading Style Sheets Part two Marko Boon

Similar presentations


Presentation on theme: "/k/k 1212 Cascading Style Sheets Part two Marko Boon"— Presentation transcript:

1 /k/k 1212 Cascading Style Sheets Part two Marko Boon http://www.win.tue.nl/~marko/cursusCSS

2 /k/k 1212 Appearance Background properties Text properties Font properties Border properties List properties Scroll bar properties (IE >5.5 only!) Part 2

3 /k/k 1212 Background properties PropertyValues background- attachment scroll fixed background-colorcolour transparent background-imageurl none

4 /k/k 1212 Background properties PropertyValues background-repeatrepeat repeat-x / repeat-y no-repeat background-positionx-% y% x-pos y-pos top/center/bottom left/center/right

5 /k/k 1212 Background properties - Example body { background-image:url( " bg.jpg " ); background-repeat:no-repeat; background-position:top left; background-attachment:fixed; }

6 /k/k 1212 Text properties PropertyValues colorcolour text-alignleft right center justify letter-spacingnormal length

7 /k/k 1212 Text properties PropertyValues text-decorationnone underline overline line-through blink text-indentlength %

8 /k/k 1212 Text properties - Example a { color:black; text-decoration:none; } a:hover { color:blue; text-decoration:underline; }

9 /k/k 1212 Font properties PropertyValues font-familyfamily-name / font-name font-sizesmall / medium / large length % font-stylenormal italic oblique

10 /k/k 1212 Font properties PropertyValues font-weightnormal bold 100, 200, 300, …, 900 font-stretchnormal wider narrower

11 /k/k 1212 Font properties - Example body { font-family : " Comic Sans MS ", sans-serif; font-size:18pt; } h1 { font-size:24pt; font-weight:bold; }

12 /k/k 1212 Border properties PropertyValues border-colorcolour transparent border-stylenone dotted, dashed, solid, double, groove, ridge, inset, outset 3D effects

13 /k/k 1212 Border properties PropertyValues border-widththin medium thick length

14 /k/k 1212 Border properties Up to four values possible:

15 /k/k 1212 Border properties Up to four values possible: black border-color:blue

16 /k/k 1212 Border properties Up to four values possible: border-color:blue blue

17 /k/k 1212 Border properties Up to four values possible: border-color:blue green blue

18 /k/k 1212 Border properties Up to four values possible: border-color:blue green blue green

19 /k/k 1212 Border properties Up to four values possible: border-color:blue green red blue green

20 /k/k 1212 Border properties Up to four values possible: border-color:blue green red blue red green

21 /k/k 1212 Border properties Up to four values possible: border-color:blue green red yellow blue red green

22 /k/k 1212 Border properties Up to four values possible: The same for border-width and border-style. border-color:blue green red yellow blue red greenyellow

23 /k/k 1212 Border properties - Example.button { font-family : "comic sans ms"; background-color:blue; border-color:cyan navy navy cyan; border-width:5; border-style:solid; color:white; }

24 /k/k 1212 List properties PropertyValues list-style-imageurl none list-style-typedisc, circle, square, decimal, lower-roman, upper-roman, lower- alpha, upper-alpha list-style-positioninside, outside

25 /k/k 1212 List properties - Example ol { list-style-position:inside; list-style-image:url("ball.gif"); list-style-type:lower-roman; } When using list-style-image, always specify a list-style-type, in case image is not found!

26 /k/k 1212 Scroll bar properties (IE >5.5 Only!) scrollbar-arrow-color scrollbar-base-color scrollbar-face-color scrollbar-highlight-color scrollbar-shadow-color scrollbar-track-color scrollbar-darkshadow-color scrollbar-3dlight-color


Download ppt "/k/k 1212 Cascading Style Sheets Part two Marko Boon"

Similar presentations


Ads by Google