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
Post a Comment