Below is a list of various style properties,
a description, values that can be applied and examples. Please
refer to the browser support page for details
on whether the effect you want will work in the different
browser flavors and versions.
text properties
|
| Property |
Description |
Values |
Example |
| color |
Sets the color of the element |
color name
hex value
|
p {color: red;}
p {color: #CC0000;}
|
| font-weight |
Lets you select the weight or boldness of the font.
|
lighter
normal
bold
bolder
100
200
300
...
900 |
p {font-weight: bold}
Displays the font as bold.
|
| font-family |
Specifies the font family, or typeface, to use for the
element.
You can specify a series of names and the first available
font is used.
|
family name
generic name:
serif
sans-serif
cursive
fantasy
monospace |
p {font-family: verdana, arial, helvetica, sans-serif}
Displays the font in verdana, if available. If not, try
arial, then helvetica, then any sans-serif font. |
| font-size |
Let you select the size of the type in the font. Font
size may be specified in absolute units or relative to
the "current" size. |
XX units
%
larger
smaller
xx-small
x-small
small
medium
large
x-large
xx-large
|
p{font-size: 10px}
Displays the paragraph in 10 pixels type.
H1 {font-size: 200%}
Displays heading 1 as 200% of normal text.
|
| font-size-adjust |
This property allows you to specify an aspect value
for an element that will preserve the x-height of the
first choice font in the substitute font. |
number
none |
|
| font-variant |
Lets you select the small caps style of the typeface.
|
normal
small-caps |
H2 {font-family: verdana, arial, helvetica, sans-serif;
font-variant: small-caps}
Displays the heading 2 as small-caps.
|
| font-style |
Specifies the style of type to use for the element.
|
normal
italic
oblique |
H2 {font-family: times, times new roman, serif; font-style:
italic}
Displays the heading 2 as italic.
|
| font-stretch |
Selects a normal, condensed, or extended face from a
font family |
normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded |
|
| text-decoration |
Sets underlining, overlining, strike-through, or blink
attributes for the element. |
underline
overline
line-through
blink
none |
A:link {text-decoration: overline;}
All links will have an overline. |
| text-transform |
Set the case of the text |
capitalize
uppercase
lowercase
none |
p {text-transform: capitalize}
Capitalizes the first character of each word in the paragraph
p (text-transform: lowercase;}
Transforms the text to lower case |
| text-shadow |
|
|
|
| letter-spacing |
Lets you control the space between letters. |
normal
XX units |
p {letter-spacing: 1px}
Adds 1 pixel of space between letters.
|
| word-spacing |
Lets you control the space between words. |
normal
XX units |
p {word-spacing: 5px}
Puts an extra 5 pixels of space between each word |
| line-height |
Also known as "leading" or "line space."
Specifies the distance between baselines of consecutive
lines of text. |
normal
XX units
% |
p {line-height: 14px}
Sets 14 pixels of space from baseline to baseline.
|
| vertical-align |
Aligns the element vertically to the baseline |
baseline
sub
super
top
text-top
middle
bottom
text-bottom
|
td {vertical-align: top;}
Aligns all the content to the top of the baseline |
| text-indent |
Sets the amount of indent for the first line of a text
block |
XX units
% |
p {text-indent: 2px}
Indents the first line of the paragraph 2 pixels.
|
| text-align |
Aligns the element horizontally across the page or within
a division |
left
right
center
justify |
th {text-align: center}
Centers all table headers.
|
| direction |
|
|
|
| unicode-bidi |
|
|
|
|
|
backgrounds, borders, margins and
padding
|
| Property |
Description |
Values |
Example |
| background-color |
Sets the color for the background of the element |
color name
hex value
|
p {background-color: blue;}
p {background-color: #0033CC;}
|
| background-image |
Specifies an image to use for the background of an element. |
url(URLname) |
body {background-image: url(/graphics/bg.gif)}
Displays the image "bg.gif" in the background
area of the whole page body.
|
| background-attachment |
Lets you attach the background image so that it doesn't
scroll. |
scroll
fixed |
body {background-image: url(/graphics/bg.gif); background-attachment:
fixed}
Displays the image "bg.gif" in the background
area of the page body and prevents the image from scrolling.
|
| background-repeat |
Specifies how and if a background image is repeated. |
repeat
repeat-x
repeat-y
no-repeat |
body {background-image: url(/graphics/bg.gif); background-repeat:
repeat}
Displays the image "bg.gif" in the background
area of the page body and repeats the image vertically
and horizontally. |
| background-position |
Sets the initial position of the background image. |
vertical %
horizontal %
top
center
bottom
left
center
right |
body {background-image: url(/graphics/bg.gif); background
position: center center}
Centers the background image vertically and horizontally
on the page body.
|
| background |
background-color, background-image, background-repeat,
background-attachment, background-position |
|
|
| border-width |
Sets the width of the element's border. |
XXunits
thin
medium
thick
none
|
td {border-width: thick}
Displays a thick border around the table cell.
|
| border-top-width |
Sets the width of the element's top border. |
width value
style value
color value |
td {border-top-width: thin solid green}
Displays a thin solid green border at the top of the
table cell.
|
| border-left-width |
Sets the width of the element's left border. |
width value
style value
color value |
td {border-left-width: thin solid green}
Displays a thin solid green border at the top of the table
cell. |
| border-bottom-width |
Sets the width of the element's bottom border. |
width value
style value
color value |
td {border-bottom-width: thin solid green}
Displays a thin solid green border at the top of the table
cell. |
| border-right-width |
Sets the width of the element's right border. |
width value
style value
color value |
td {border-right-width: thin solid green}
Displays a thin solid green border at the top of the table
cell. |
| border-color |
Sets the color of the element's border. |
color name
hex value |
td {border-color: blue}
Displays a blue border around the table cell.
|
| border-style |
Sets the style of the element's border. |
none
dotted
dashed
solid
double
groove
ridge
inset
outset |
table {border-style: dotted}
Displays a dotted border around the table.
|
| border |
Sets the width, color, and style of the border simultaneously
|
width value
style value
color value |
td {border: 1px solid green}
Displays a 1 pixel wide solid green border on table cell. |
| border-top |
Sets the width, color, and style of the border simultaneously
|
width value
style value
color value |
td {border-top: 1px solid green}
Displays a 1 pixel wide solid green border on the top
of the table cell. |
| border-left |
Sets the width, color, and style of the border simultaneously
|
width value
style value
color value |
td {border-left: 1px solid green}
Displays a 1 pixel wide solid green border on the left
of the table cell. |
| border-bottom |
Sets the width, color, and style of the border simultaneously
|
width value
style value
color value |
td {border-bottom: 1px solid green}
Displays a 1 pixel wide solid green border on the bottom
of the table cell. |
| border-right |
Sets the width, color, and style of the border simultaneously
|
width value
style value
color value |
td {border-right: 1px solid green}
Displays a 1 pixel wide solid green border on the right
of the table cell. |
| margin |
|
|
|
| margin-top |
Places the top margin of the element; you can use negative
values. |
XX units
%
auto |
p {margin-top: 5px}
Displays the top margin of the paragraph 5px down the
page. |
| margin-left |
Places the left margin of the element; you can use negative
values. |
XX units
%
auto |
div {margin-left: 20px}
Displays the left margin of the division 20 pixels from
the left of the page. |
| margin-bottom |
Places the bottom margin of the element; you can use
negative values. |
XX units
%
auto |
p {margin-bottom: 5px}
Displays the bottom margin of the paragraph as 5px. |
| margin-right |
Places the right margin of the element; you can use
negative values. |
XX units
%
auto |
div {margin-right: 20px}
Displays the left margin of the division 20 pixels from
the right of the page. |
| padding |
|
|
|
| padding-top |
Inserts padding at the top of the element. |
XX units
%
auto |
Table {padding-top: 10px}
Inserts 10 pixels at the top of every cell in the table.
|
| padding-left |
Inserts padding along the left side of the element.
|
XX units
%
auto |
Table {padding-left: 10px}
Inserts 10 pixels to the left of every cell in the table. |
| padding-bottom |
Inserts padding at the bottom of the element. |
XX units
%
auto |
Table {padding-bottom: 10px}
Inserts 10 pixels at the bottom of every cell in the table.
|
| padding-right |
Inserts padding along the right side of the element.
|
XX units
%
auto |
Table {padding-right: 10px}
Inserts 10 pixels to the right of every cell in the table. |
|
|
layout properties
|
| Property |
Description |
Values |
Example |
| top |
Sets the distance from the top of the page. |
XX units |
div {top: 100px}
The division will start 100 pixels from the top of the
page. |
| left |
Sets the distance from the left of the page. |
XX units |
div {top: 100px}
The division will start 100 pixels from the left of the
page. |
| bottom |
Sets the distance from the bottom of the page. |
XX units |
div {top: 100px}
The division will start 100 pixels from the bottom of
the page. |
| right |
Sets the distance from the right of the page. |
XX units |
div {top: 100px}
The division will start 100 pixels from the right of the
page. |
| width |
Sets the width of the element. |
XX units |
div {width: 100px}
The division will have a width of 100 pixels |
| min-width |
|
|
|
| max-width |
|
|
|
| height |
Sets the height of the element. |
XX units |
div {height: 100px}
The division will have a height of 100 pixels |
| z-index |
|
|
|
| visibility |
|
|
|
| overflow |
|
|
|
| float |
Places the element to the left or right and flows text
around it. |
right
left
none |
img {float: left}
Places images to the left margin and flows text around
it. |
| clear |
Prevents text from flowing around an element. |
right
left
none |
img {float: clear}
Places images to the left margin and prevents text flowing
around it. |
| clip |
|
|
|
|
|
elements properties
|
| Property |
Description |
Values |
Example |
| display |
Specifies the category of object an element belongs
to: a block element, like a heading or paragraph; an inline
element, like emphasis or anchors; or a list-item element.
If the category is none, the content of the element should
not be displayed at all. |
none
" "
block
inline
list-item |
p {display: none}
Hides the content of the paragraph.
p {display: ""}
Display the contents of the paragraph.
p {display: block}
Treats the paragraph as a block element, which can
be positioned separately using the positioning attributes.
|
| white-space |
Describes how white space should be handled within the
block elements. |
normal
pre
no-wrap |
p {white-space: no-wrap}
The paragraph will break only with a specific <br>
tag. |
| list-style-type |
Sets the type of symbol that appears in front of a list
item. |
disc
circle
square
decimal
lower-
roman
upper-
roman
lower-
alpha
upper
alpha |
ul {list-style-type: square}
Unordered list items will use a square bullet. |
| list-style-image |
Selects a specific image to serve as a bullet in front
of list items. |
url(URLname) |
ul {list-style-image: url(/graphics/bullet.gif)}
Unordered list items will use the image "bullet.gif"
as a bullet. |
| list-style-position |
Describes how the bullet marker and text in a list line
up with each other. |
inside
outside |
ul {list-style-position: outside}
Creates the effect of a hanging indent
ul {list-style-position: inside}
The bullet and the second line of text are flush left.
|
| list-style |
|
|
|
| table-layout |
|
|
|
| border-collapse |
|
|
|
| border-spacing |
|
|
|
|
|
selectors properties
|
| Property |
Description |
Values |
Example |
| html element selectors |
|
|
|
| class selectors |
|
|
|
| id selectors |
|
|
|
| contextual selectors |
|
|
|
| link pseudo class selectors |
|
|
|
| dynamic pseudo class selectors |
|
|
|
| pseudo element selectors |
|
|
|
| first-line |
|
|
|
| first-letter |
|
|
|
| before |
|
|
|
| after |
|
|
|
| selector groups |
|
|
|
| language pseudo class selectors |
|
|
|
| child selectors |
|
|
|
| first child selectors |
|
|
|
| adjacent selectors |
|
|
|
| attribute selectors |
|
|
|
| row and column selectors |
|
|
|
|
|
navigation