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 |
|
|
</ |
