{ FreeCSSVideoTutorials.com }
Learn CSS by Watching Videos, Tutorials and Examples
CSS Property References
The CSS and CSS3 properties are organized by category. The text link in each table under the "Property" column points to the syntax, examples, web browser, etc. of that particular property.
CSS Background Properties
| Property | Description | Values | CSS Level |
|---|---|---|---|
| background | Sets all of the individual background properties in one declaration |
background-color
background-image background-repeat background-attachment background-position inherit |
CSS level 1 |
| background-attachment | Specifies whether a background image will have a fixed position or if it will scroll with the rest of the page |
scroll
fixed inherit |
CSS level 1 |
| background-color | Sets the background color of an element |
color name
hex code RGB code transparent inherit |
CSS level 1 |
| background-image | Sets the background image for an element |
url('URL')
none inherit |
CSS level 1 |
| background-position | Sets the starting position of a background image |
left top
left center left bottom right top right center right bottom center top center center center bottom x% y% x position y position inherit |
CSS level 1 |
CSS Border Properties
| Property | Description | Values | CSS level |
|---|---|---|---|
| border | Sets all of the border properties in one declaration |
border-width
border-style border-color inherit |
CSS level 1 |
| border-bottom | Sets all of the bottom border properties in one declaration |
border-width
border-style border-color inherit |
CSS level 1 |
| border-bottom-color | Sets the color of the bottom border |
color name
hex number RGB number transparent inherit |
CSS level 2 |
| border-bottom-style | Sets the style of the bottom border |
none
hidden dotted dashed solid double groove ridge inset outset inherit |
CSS level 2 |
| border-bottom-width | Sets the width of the bottom border |
thin
medium thick length inherit |
CSS level 1 |
| border-color | Sets the color of the four borders |
color name
hex number RGB number transparent inherit |
CSS level 1 |
| border-left | Sets all of the left border properties in one declaration |
border-left-width
border-left-style border-left-color inherit |
CSS level 1 |
| border-left-color | Sets the color of the left border |
color name
hex number RGB number transparent inherit |
CSS level 2 |
| border-left-style | Sets the style of the left border |
none
hidden dotted dashed solid double groove ridge inset outset inherit |
CSS level 2 |
| border-left-width | Sets the width of the left border |
thin
medium thick length inherit |
CSS level 1 |
| border-right | Sets all of the right border properties in one declaration |
border-right-width
border-right-style border-right-color inherit |
CSS level 1 |
| border-right-color | Sets the color of the right border |
color name
hex number RGB number transparent inherit |
CSS level 2 |
| border-right-style | Sets the style of the right border |
none
hidden dotted dashed solid double groove ridge inset outset inherit |
CSS level 2 |
| border-right-width | Sets the width of the right border |
thin
medium thick length inherit |
CSS level 1 |
| border-style | Sets the style of the four borders |
none
hidden dotted dashed solid double groove ridge inset outset inherit |
CSS level 1 |
| border-top | Sets all of the top border properties in one declaration |
border-top-width
border-top-style border-top-color inherit |
CSS level 1 |
| border-top-color | Sets the color of the top border |
color name
hex number RGB number transparent inherit |
CSS level 2 |
| border-top-style | Sets the style of the top border |
none
hidden dotted dashed solid double groove ridge inset outset inherit |
CSS level 2 |
| border-top-width | Sets the width of the top border |
thin
medium thick length inherit |
CSS level 1 |
| border-width | Sets the width of the four borders |
thin
medium thick length inherit |
CSS level 1 |
CSS Dimension Properties
| Property | Description | Values | CSS level |
|---|---|---|---|
| height | Sets the height of an element |
auto
length % inherit |
CSS level 1 |
| max-height | Sets the maximum height of an element |
none
length % inherit |
CSS level 2 |
| max-width | Sets the maximum width of an element |
none
length % inherit |
CSS level 2 |
| min-height | Sets the minimum height of an element |
length
% inherit |
CSS level 2 |
| min-width | Sets the minimum width of an element |
length
% inherit |
CSS level 2 |
| width | Sets the width of an element |
auto
length % inherit |
CSS level 1 |
CSS Font Properties
| Property | Description | Values | CSS Level |
|---|---|---|---|
| font | Sets of all properties in one declaration |
font-style
font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar inherit |
CSS level 1 |
| font-family | Is used to define the font that a text should be displayed in |
family-name
generic-family inherit |
CSS level 1 |
| font-size | Is used to set the size of a text |
xx-small
x-small small medium large x-large xx-large smaller larger length % inherit |
CSS level 1 |
| font-style | Is used to define wether a font is italic, oblique or normal |
normal
italic oblique inherit |
CSS level 1 |
| font-variant | Is used to specify wether a text should be displayed as normal text or in a small-caps |
normal
small-caps inherit |
CSS level 1 |
| font-weight | Is used to specify the boldness of a font |
normal
bold bolder lighter 100 200 300 400 500 600 700 800 900 inherit |
CSS level 1 |
CSS Generated Content Properties
| Property | Description | Values | CSS level |
|---|---|---|---|
| content | Is used in conjunction with the :before or :after pseudo-elements to insert generated content |
none
normal content specifications inherit |
CSS level 2 |
| counter-increment | Increments one or more counters |
none
id number inherit |
CSS level 2 |
| counter-reset | Creates or resets one or more counters |
none
id number inherit |
CSS level 2 |
| quotes | Sets the type of quotation marks for embedded quotations |
none
string string string string inherit |
CSS level 2 |
CSS List Properties
| Property | Description | Values | CSS level |
|---|---|---|---|
| list-style | Sets all of the properties for a list in one declaration |
list-style-type
list-style-position list-style-image inherit |
CSS level 1 |
| list-style-image | Specifies an image as the list-item marker |
url
none inherit |
CSS level 1 |
| list-style-position | Specifies wether the list-item markers should appear inside or outside the content flow |
inside
outside inherit |
CSS level 1 |
| list-style-type | Specifies the type of list-item marker |
none
circle disc square armenian decimal decimal-leading-zero georgian lower-alpha lower-greek lower-latin lower-roman upper-alpha upper-latin upper-roman inherit |
CSS level 1 |
CSS Margin Properties
| Property | Description | Values | CSS level |
|---|---|---|---|
| margin | Sets all of the margin properties in one declaration |
auto
length % inherit |
CSS level 1 |
| margin-bottom | Sets the bottom margin of an element |
auto
length % inherit |
CSS level 1 |
| margin-left | Sets the left margin of an element |
auto
length % inherit |
CSS level 1 |
| margin-right | Sets the right margin of an element |
auto
length % inherit |
CSS level 1 |
| margin-top | Sets the top margin of an element |
auto
length % inherit |
CSS level 1 |
CSS Outline Properties
| Property | Description | Values | CSS level |
|---|---|---|---|
| outline | Sets all of the outline properties in one declaration |
outline-color
outline-style outline-width inherit |
CSS level 2 |
| outline-color | Sets the color of an outline |
color name
hex number RGB number invert inherit |
CSS level 2 |
| outline-style | Sets the style of an outline |
none
hidden dotted dashed solid double groove ridge inset outset inherit |
CSS level 2 |
| outline-width | Sets the width of an outline |
thin
medium thick length inherit |
CSS level 2 |
CSS Padding Properties
| Property | Description | Values | CSS level |
|---|---|---|---|
| padding | Sets all of the padding properties in one declaration |
length
% inherit |
CSS level 1 |
| padding-bottom | Sets the bottom padding of an element |
length
% inherit |
CSS level 1 |
| padding-left | Sets the left padding of an element |
length
% inherit |
CSS level 1 |
| padding-right | Sets the right padding of an element |
length
% inherit |
CSS level 1 |
| padding-top | Sets the top padding of an element |
length
% inherit |
CSS level 1 |
CSS Positioning Properties
| Property | Description | Values | CSS level |
|---|---|---|---|
| bottom | Sets the bottom margin edge for a positioned box |
auto
length % inherit |
CSS level 2 |
| clear | Specifies which side to turn off floating to |
left
right both none inherit |
CSS level 1 |
| clip | Clips an absolutely positioned element |
shape
auto inherit |
CSS level 2 |
| cursor | Specifies the type of cursor to be displayed |
URL
auto crosshair default e-resize help move n-resize ne-resize nw-resize pointer progress s-resize se-resize text w-resize wait inherit |
CSS level 2 |
| display | Specifies the type of box an element should generate |
none
block inline inline-block inline-table list-item run-in table table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group inherit |
CSS level 1 |
| float | Specifies whether or not a box should float |
left
right none inherit |
CSS level 1 |
| left | Sets the left margin edge for a positioned box |
auto
length % inherit |
CSS level 2 |
| overflow | Specifies what happens if content overflows an element's box |
visible
hidden scroll auto inherit |
CSS level 2 |
| position | Specifies the type of positioning for an element |
absolute
fixed relative static inherit |
CSS level 2 |
| right | Sets the right margin edge for a positioned box |
auto
length % inherit |
CSS level 2 |
| top | Sets the top margin edge for a positioned box |
auto
length % inherit |
CSS level 2 |
| visibility | Specifies whether or not an element is visible |
visible
hidden collapse inherit |
CSS level 2 |
| z-index | Sets the stack order of an element |
auto
number inherit |
CSS level 2 |
CSS Print Properties
| Property | Description | Values | CSS level |
|---|---|---|---|
| orpans | Defines the minimum number of lines of a paragraph that must be left at the bottom of a page |
number
inherit |
CSS level 2 |
| page-break-after | Sets the page-breaking behavior after an element |
auto
always avoid left right inherit |
CSS level 2 |
| page-break-before | Sets the page-breaking behavior before an element |
auto
always avoid left right inherit |
CSS level 2 |
| page-break-inside | Sets the page-breaking behavior inside an element |
auto
avoid inherit |
CSS level 2 |
| windows | Defines the minimum number of lines of a paragraph that must be left at the top of a page |
number
inherit |
CSS level 2 |
CSS Table Properties
| Property | Description | Values | CSS level |
|---|---|---|---|
| border-collapse | Specifies whether or not table borders should be collapsed |
collapse
seperate inherit |
CSS level 2 |
| border-spacing | Specifies the distance between the borders of adjacent cells |
length lengt
inherit |
CSS level 2 |
| caption-side | Specifies the placement of a table caption |
top
bottom inherit |
CSS level 2 |
| empty-cells | Specifies whether or not to display borders and background on empty cells in a table |
hide
show inherit |
CSS level 2 |
| table-layout | Sets the layout algorithm to be used for a table |
auto
fixed inherit |
CSS level 2 |
CSS Text Properties
| Property | Description | Values | CSS Level |
|---|---|---|---|
| color | Sets the color of text |
color name
hex code RGB code inherit |
CSS level 1 |
| direction | Specifies the direction of flow of text |
ltr
rtl inherit |
CSS level 2 |
| letter-spacing | Sets the space between characters in a text |
normal
length inherit |
CSS level 1 |
| line-height | Sets the line-height |
normal
number length % inherit |
CSS level 1 |
| text-align | Specifies the horizontal alignment of text in an element |
left
right center justify inherit |
CSS level 1 |
| text-decoration | Specifies the decoration added to text |
none
underline overline line-through blink inherit |
CSS level 1 |
| text-indent | Specifies the indentation of the first line in a text-block |
length
% inherit |
CSS level 1 |
| text-shadow | Specifies the shadow effect added to text | CSS level 1 | |
| text-transform | Specifies the capitalization of text |
none
capitalize uppercase lowercase inherit |
CSS level 1 |
| unicode-bidi | It allows you to change the direction of a text that is embedded within another text that is flowing in a different direction |
normal
embed bidi-override inherit |
CSS level 2 |
| vertical-align | Sets the vertical alignment of a text |
length
% baseline sub super top text-top middle bottom text-bottom inherit |
CSS level 1 |
| white-space | Specifies how white-space inside an element is handled |
normal
nowrap pre pre-line pre-wrap inherit |
CSS level 1 |
| word-spacing | Sets the space between words in a text |
normal
length inherit |
CSS level 1 |
CSS Pseudo-classes/elements
| Property | Description | CSS level |
|---|---|---|
| :active | Adds a style to an element that is activated | CSS level 1 |
| :after | Adds content after an element | CSS level 2 |
| :before | Adds content before an element | CSS level 2 |
| :first-child | Adds a style to an element that is the first child of another element | CSS level 2 |
| :first-letter | Adds a style to the first character of a text | CSS level 1 |
| :first-line | Adds a style to the first line of a text | CSS level 1 |
| :focus | Adds a style to an element that has keyboard input focus | CSS level 2 |
| :hover | Adds a style to an element when you mouse over it | CSS level 1 |
| :lang | Adds a style to an element with a specific lang attribute | CSS level 2 |
| :link | Adds a style to an unvisited link | CSS level 1 |
| :visited | Adds a style to a visited link | CSS level 1 |
