CSS Properties

CSS Font and Text Properties

CSS Property
Example Value
Other Values
text-align:
center
Left, Right
font-family:
Verdana, Arial, Helvetica, Sans-Serif

font-size:
16px
|percent |em |xx-large, x-small, small, medium, large, x-large, smaller, larger
font-style:
italic
normal (the default), oblique
font-variant:
small-caps

font-weight:
Bold
Bolder | Lighter | Any number from 100 to 900
Color:
Red
A colour name, Hexadecimal value, RGB Value


CSS borders, backgrounds, margins, padding

CSS Property
CSS Value
border-style
dotted, dashed, solid, double, groove, ridge, inset
border-width
A pixel value like 2px
border-color
A colour value
background-color
A colour value
background-image
url('my_image_name.gif');
background-repeat
repeat, repeat-x, repeat-y, no-repeat
background-position
top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right
clear
left, right , both , none
float
right, left , none
margin
A pixel value like 5px
margin-left
A pixel value like 5px
margin-right
A pixel value like 5px
margin-top
A pixel value like 5px
margin-bottom
A pixel value like 5px
padding
A pixel value like 5px


CSS used in the Lists section

CSS Property
CSS Value
Explanation
a:hover
A colour
Used for mouseover colours
a:visited
A colour
Used for visited pages colours
Display
block, inline
Blocks of elements or all in a line
Height
A px or % value
Set a height for an element such as a DIV or P tag
list-style-type
none
Use to switch off bullets for lists
text-decoration
none
Switch off the underlines for hyperlinks
Width
Red
Set a width for an element such as a DIV or P tag

CSS used in the Positioning section

CSS Property
CSS Value
Explanation
/* */
A colour
CSS comment - more than one line
//
A colour
CSS comment - one line
position:
relative, absolute, fixed
Types of positioning
Top
A pixel value
Position an element on the page
Bottom
A pixel value
Position an element on the page
Left
A pixel value
Position an element on the page
Right
A pixel value
Position an element on the page
z-index
A numerical value
Used to stack elements one behind the other
Float
left, right
Float an element left or right
Clear
left, right, both
Clear a floated element


Comments