Cascading Style Sheets Part two

1
Cascading Style SheetsPart two

• Marko Boon
• http//www.win.tue.nl/marko/cursusCSS

2
Appearance
Part 2

• Background properties
• Text properties
• Font properties
• Border properties
• List properties
• Scroll bar properties (IE gt5.5 only!)

3
Background properties
Property Values
background-attachment scroll fixed
background-color colour transparent
background-image url none
4
Background properties
Property Values
background-repeat repeat repeat-x / repeat-y no-repeat
background-position x- y x-pos y-pos top/center/bottom left/center/right
5
Background properties - Example
body background-imageurl("bg.jpg")
background-repeatno-repeat background-position
top left background-attachmentfixed
6
Text properties
Property Values
color colour
text-align left right center justify
letter-spacing normal length
7
Text properties
Property Values
text-decoration none underline overline line-through blink
text-indent length
8
Text properties - Example
a colorblack text-decorationnone ahov
er colorblue text-decorationunderline
9
Font properties
Property Values
font-family family-name / font-name
font-size small / medium / large length
font-style normal italic oblique
10
Font properties
Property Values
font-weight normal bold 100, 200, 300, , 900
font-stretch normalwidernarrower
11
Font properties - Example
body font-family "Comic Sans MS",
sans-serif font-size18pt h1
font-size24pt font-weightbold
12
Border properties
Property Values
border-color colour transparent
border-style none dotted, dashed, solid, double, groove, ridge, inset, outset
13
Border properties
Property Values
border-width thin medium thick length
14
Border properties
Up to four values possible
15
Border properties
Up to four values possible
border-colorblue
black
black
black
black
16
Border properties
Up to four values possible
border-colorblue
blue
blue
blue
blue
17
Border properties
Up to four values possible
border-colorblue green
blue
blue
blue
blue
18
Border properties
Up to four values possible
border-colorblue green
blue
green
green
blue
19
Border properties
Up to four values possible
border-colorblue green red
blue
green
green
blue
20
Border properties
Up to four values possible
border-colorblue green red
blue
green
green
red
21
Border properties
Up to four values possible
border-colorblue green red yellow
blue
green
green
red
22
Border properties
Up to four values possible
border-colorblue green red yellow
blue
green
yellow
red
The same for border-width and border-style.
23
Border properties - Example
.button font-family "comic sans ms"
background-colorblue border-colorcyan navy
navy cyan border-width5 border-stylesolid
colorwhite
24
List properties
Property Values
list-style-image url none
list-style-type disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha
list-style-position inside, outside
25
List properties - Example
ol list-style-positioninside
list-style-imageurl("ball.gif")
list-style-typelower-roman
26
Scroll bar properties (IE gt5.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-col
or