CSS 2 Tutorial - Properties and Values
What is CSS 2? Internet Programming 3 Description
This CSS tutorial describes properties and values contained in Cascading Style Sheets, level 2. CSS 2 is a style sheet language that allows for presentation to be separated from content.
By separating the presentation of documents from the content of documents, CSS 2 simplifies Web document creation and site maintenance.
| PROPERTY | VALUE | DESCRIPTION | INHERITED | EXAMPLE |
|---|---|---|---|---|
| font |
font-style font-family font-size/line-height font-weight font-variant caption small-caption icon menu message-box status-bar |
Used for setting all the font properties in one declaration. |
Yes |
font: oblique small-caps 900 12px/14px arial
font: menu
|
| PROPERTY | VALUE | DESCRIPTION | INHERITED | EXAMPLE |
|---|---|---|---|---|
|
letter- spacing |
normal length |
Used to increase or decrease the space between characters. |
Yes |
letter-
spacing: 3px |
|
word- spacing |
normal length |
Used to increase or decrease the space between words. Note:negative values are allowed. |
Yes |
This sentence
use word-spacing: -4px
This sentence
use word-spacing: 4px |
|
text- align |
left right center justify |
Used to align text in an element. |
Yes |
text-align:
left;
text-align:
center |
|
line- height |
number normal length |
Used to set the distance between lines. |
Yes |
The line height
of this s entence is set by: line- height: 20pt |
|
text- indent |
length % |
Used to indent the first line in an element. Note: Negative values are allowed |
Yes |
text-indent:
-6px
text-indent:
6px |
| PROPERTY | VALUE | DESCRIPTION | INHERITED | EXAMPLE |
|---|---|---|---|---|
| list-style |
list-style-type list-style-position list-style-image |
Used for setting all of the properties for a list in one declaration |
Yes |
|
| PROPERTY | VALUE | DESCRIPTION | INHERITED | EXAMPLE |
|---|---|---|---|---|
| color | color |
Used for setting the color of a text. |
Yes |
color: rgb(254,255,200)
color : #FFFFFF
color : blue
|
| PROPERTY | VALUE | DESCRIPTION | INHERITED | EXAMPLE |
|---|---|---|---|---|
| visibility |
visible hidden collapse |
Used to set if an element should be visible or invisible. |
No |
When used in table elements the collapse value removes
a row or column, but it does not affect the table layout.
The space taken up by the row or column will
be available for other content. If this value
is used on other elements, it renders as "hidden".
visibility: collapse
visibility: visible
visibility: hidden
|
| PROPERTY | VALUE | DESCRIPTION | INHERITED | EXAMPLE |
|---|---|---|---|---|
| background |
back ground- color back ground- image back ground- repeat back ground- attach ment back ground- position |
Used for setting all background properties in one declaration |
No |
background: #FFFFFF |
| PROPERTY | VALUE | DESCRIPTION | INHERITED | EXAMPLE |
|---|---|---|---|---|
| margin |
margin-top margin-right margin-bottom margin-left |
Used for setting the margin properties in one declaration. |
No |
div {margin: 2px}
all margins will be 2px
div {margin: 5px 5%}
top and bottom margin
will be 2px, left and right margin will be 2% of the element width.
div {margin: 2px 2% 2px}
top margin will be 2px,
left and right margin will be 2% of the element width, bottom margin will be 2px.
div {margin: 2px 2% -2px auto}
top margin will be
2px, right margin will be 2% of the total width of the element, bottom margin will be -2px, left margin will be set by the browser |
| PROPERTY | VALUE | DESCRIPTION | INHERITED | EXAMPLE |
|---|---|---|---|---|
| border |
border-width border-style border-color |
Used for setting all of the properties for the four borders in one declaration. |
No |
border:
solid #FFFFFF 7pt |
| PROPERTY | VALUE | DESCRIPTION | INHERITED | EXAMPLE |
|---|---|---|---|---|
| padding |
padding-top padding-right padding-bottom padding-left |
Used for setting all of the padding properties in one declaration. Note: Negative values are not allowed. |
No |
div {padding: 1px}
padding will be 1px on all four sides of the div element
div {padding: 1px 1%}
top and bottom padding will be 1px, left and right padding will be 1% of the width of the closest element.
div{padding: 1px 1% 1px}
top padding will be 1px, left and right padding will be 1% of the width of the closest element, bottom padding will be 1px
div {padding:1px 1% 1px 1px}
top padding will
be 1px, right padding will be 1% of the width of the closest element, bottom padding will be 1px, left padding will be 1px |
| PROPERTY | VALUE | DESCRIPTION | INHERITED | EXAMPLE |
|---|---|---|---|---|
| border-collapse |
collapse separate |
Used for setting the border model for a table. |
Yes |
border-collapse:
separate |
| table-layout |
auto fixed |
Used for setting the table layout. |
Yes |
table-layout:
fixed |
| PROPERTY | VALUE | DESCRIPTION | INHERITED | EXAMPLE |
|---|---|---|---|---|
| width |
auto % length |
Used for setting the width of an element |
No |
width:
50px 
|
| height |
auto length % |
Used for setting the height of an element |
No |
height:
50px
|
| PROPERTY | VALUE | DESCRIPTION | INHERITED | EXAMPLE |
|---|---|---|---|---|
| position |
static relative absolute fixed |
Used to place an element in a static, relative, absolute or fixed position. |
No |
With the value
This text is in absolute
position 10 percent from the left: position: relative right : 10%
With the value
This text is
in relative position 20 pixels from the right: position: relative right : 20px |
| top |
auto length % |
Used to set how far the top edge of an element is above/below the top edge of it's parent element. |
No |
top: 20px
Used to set the top edge of the paragraph 20px below the top edge of the window.
top: -20px
Used to
set the top edge of the paragraph 20px above the top edge of the window. |
| left |
auto % length |
Used to set how far the left edge of an element is to the right/left of the left edge of the parent element. |
No |
left: 2px
Used to set the left edge of the paragraph 2 px to the right of the left edge of the window.
left: -2px
Used to sets
the left edge of the paragraph 2px to the left of the left edge of the window. |
| z-index |
auto number |
Sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order.
Note: Elements can
have negative stack orders.
Note: z-index
only works on elements that have been positioned (e.g. position:absolute;). |
No |
z-index: -1
With the value of "auto"The stack order is equal to its parents: z-index : auto |