CSS Reference
W3Tutors' CSS reference is tested regularly with all major browsers.
Tested: 02 July, 2010.
CSS Selectors
In CSS, selectors are patterns used to select the element(s) you want to style.
The "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).
Selector |
Example |
Example Selects: |
CSS |
.class |
.intro |
All elements with class="intro" |
1 |
#id |
#firstname |
The element with id="firstname" |
1 |
* |
* |
All elements |
2 |
element |
p |
All <p> elements |
1 |
element,element |
div,p |
All <div> elements and all <p> elements |
1 |
element element |
div p |
All <p> elements inside <div> elements |
1 |
element>element |
div>p |
All <p> elements where the parent is a <div> element |
2 |
element+element |
div+p |
All <p> elements placed immediately after a <div> element |
2 |
[attribute] |
[target] |
All elements with a target attribute |
2 |
[attribute=value] |
[target=_blank] |
All elements with a target attribute equal to "_blank" |
2 |
[attribute~=value] |
[title=flower] |
All elements with a title attribute that contains space separated words, one of which is "flower" |
2 |
[attribute|=language] |
[lang|=en] |
All elements where the lang attribute's value is "en", even if the value contains a hyphen (-), like "en-us" |
2 |
:link |
a:link |
All links (<a> elements with href) |
1 |
:visited |
a:visited |
All visited links |
1 |
:active |
a:active |
Active links |
1 |
:hover |
a:hover |
Links on mouse over |
1 |
:focus |
input:focus |
The input element that has focus |
2 |
:first-letter |
p:first-letter |
The first letter of all <p> elements |
1 |
:first-line |
p:first-line |
The first line of all <p> elements |
1 |
:first-child |
p:first-child |
All <p> elements that is the first child of its parent |
2 |
:before |
p:before |
Content will be placed before each <p> element |
2 |
:after |
p:after |
Content will be placed after each <p> element |
2 |
:lang(language) |
p:lang(it) |
All <p> elements with the lang attribute containing "it" |
2 |
CSS Properties
CSS Property Groups
The "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).
Property |
Description |
CSS |
height |
Sets the height of an element |
1 |
max-height |
Sets the maximum height of an element |
2 |
max-width |
Sets the maximum width of an element |
2 |
min-height |
Sets the minimum height of an element |
2 |
min-width |
Sets the minimum width of an element |
2 |
width |
Sets the width of an element |
1 |
Property |
Description |
CSS |
font |
Sets all the font properties in one declaration |
1 |
font-family |
Specifies the font family for text |
1 |
font-size |
Specifies the font size of text |
1 |
font-style |
Specifies the font style for text |
1 |
font-variant |
Specifies whether or not a text should be displayed in a small-caps font |
1 |
font-weight |
Specifies the weight of a font |
1 |
Property |
Description |
CSS |
content |
Used with the :before and :after pseudo-elements, to insert generated content |
2 |
counter-increment |
Increments one or more counters |
2 |
counter-reset |
Creates or resets one or more counters |
2 |
quotes |
Sets the type of quotation marks for embedded quotations |
2 |
Property |
Description |
CSS |
list-style |
Sets all the properties for a list in one declaration |
1 |
list-style-image |
Specifies an image as the list-item marker |
1 |
list-style-position |
Specifies if the list-item markers should appear inside or outside the content flow |
1 |
list-style-type |
Specifies the type of list-item marker |
1 |
Property |
Description |
CSS |
margin |
Sets all the margin properties in one declaration |
1 |
margin-bottom |
Sets the bottom margin of an element |
1 |
margin-left |
Sets the left margin of an element |
1 |
margin-right |
Sets the right margin of an element |
1 |
margin-top |
Sets the top margin of an element |
1 |
Property |
Description |
CSS |
padding |
Sets all the padding properties in one declaration |
1 |
padding-bottom |
Sets the bottom padding of an element |
1 |
padding-left |
Sets the left padding of an element |
1 |
padding-right |
Sets the right padding of an element |
1 |
padding-top |
Sets the top padding of an element |
1 |
Property |
Description |
CSS |
bottom |
Sets the bottom margin edge for a positioned box |
2 |
clear |
Specifies which sides of an element where other floating elements are not allowed |
1 |
clip |
Clips an absolutely positioned element |
2 |
cursor |
Specifies the type of cursor to be displayed |
2 |
display |
Specifies the type of box an element should generate |
1 |
float |
Specifies whether or not a box should float |
1 |
left |
Sets the left margin edge for a positioned box |
2 |
overflow
|
Specifies what happens if content overflows an element's box |
2 |
position |
Specifies the type of positioning for an element |
2 |
right |
Sets the right margin edge for a positioned box |
2 |
top |
Sets the top margin edge for a positioned box |
2 |
visibility |
Specifies whether or not an element is visible |
2 |
z-index |
Sets the stack order of an element |
2 |
Property |
Description |
CSS |
orphans |
Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element |
2 |
page-break-after |
Sets the page-breaking behavior after an element |
2 |
page-break-before |
Sets the page-breaking behavior before an element |
2 |
page-break-inside |
Sets the page-breaking behavior inside an element |
2 |
widows |
Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element |
2 |
Property |
Description |
CSS |
border-collapse |
Specifies whether or not table borders should be collapsed |
2 |
border-spacing |
Specifies the distance between the borders of adjacent cells |
2 |
caption-side |
Specifies the placement of a table caption |
2 |
empty-cells |
Specifies whether or not to display borders and background on empty cells in a table |
2 |
table-layout |
Sets the layout algorithm to be used for a table |
2 |
Property |
Description |
CSS |
color |
Sets the color of text |
1 |
direction |
Specifies the text direction/writing direction |
2 |
letter-spacing |
Increases or decreases the space between characters in a text |
1 |
line-height |
Sets the line height |
1 |
text-align |
Specifies the horizontal alignment of text |
1 |
text-decoration |
Specifies the decoration added to text |
1 |
text-indent |
Specifies the indentation of the first line in a text-block |
1 |
text-shadow |
Specifies the shadow effect added to text |
2 |
text-transform |
Controls the capitalization of text |
1 |
unicode-bidi |
|
2 |
vertical-align |
Sets the vertical alignment of an element |
1 |
white-space |
Specifies how white-space inside an element is handled |
1 |
word-spacing |
Increases or decreases the space between words in a text |
1 |