Quick Selection
Background Property
| Properties |
Definitions |
Examples |
CSS |
| background |
Sets all background properties: |
background:#4c4c4c url("image/gloss.png") top center repeat-x; |
1 |
| background-attachment |
Sets whether the image scrolls or is fixed on a page: |
background-attachment:fixed; |
1 |
| background-color |
Sets the background color of an element: |
background:blue; |
1 |
| background-image |
Sets the background image on an element: |
background-image:url("image/header.jpg"); |
1 |
| background-position |
Sets the position of an element: |
background-position:center; |
1 |
| background-repeat |
Sets how the background will repeat: |
background-repeat:repeat; |
1 |
Border and Outline Properties
| Properties |
Definitions |
Examples |
CSS |
| border |
Sets all four definitions in one declaration |
border:1px inset blue; |
1 |
| border-style |
Sets the border style for all four sides |
border-style:groove; |
2 |
| border-width |
Sets the border width for all four sides |
border-width:thick; |
1 |
| border-color |
Sets the border color for all four sides |
border-color:#ff9300; |
2 |
| border-top |
Sets the top border in one declaration |
border-top:thin solid #fff; |
1 |
| border-top-width |
Sets the top border width |
border-top-width:medium; |
1 |
| border-top-color |
Sets the top border color |
border-top-color:purple; |
2 |
| border-top-style |
Sets the top border style |
border-top-style:ridge; |
2 |
| border-right |
Sets the right border in one declaration |
border-right:10px dotted orange; |
1 |
| border-right-color |
Sets the right border color |
border-right-color:#000; |
2 |
| border-right-style |
Sets the right border style |
border-right-width:dashed; |
2 |
| border-right-width |
Sets the right border width |
border-right-width:2px; |
1 |
| border-bottom |
Sets the bottom border in one declaration |
border-bottom:3px hidden transparent; |
1 |
| border-bottom-color |
Sets the bottom border color |
border-bottom-color:#470b0b; |
2 |
| border-bottom-style |
Sets the bottom border style |
border-bottom-style:none; |
2 |
| border-bottom-width |
Sets the bottom border width |
border-bottom-width:4px; |
1 |
| border-left |
Sets the left border in one declaration |
border-left:6px outset white; |
1 |
| border-left-color |
Sets the left border color |
border-left-color:#fff1d8; |
2 |
| border-left-style |
Sets the left border style |
border-left-style:inherit; |
2 |
| border-left-width |
Sets the left border width |
border-left-width:8px; |
1 |
| outline |
Sets the outline in one declaration |
outline:3px dotted green; |
2 |
| outline-color |
Sets the outline color |
outline-color:blue; |
2 |
| outline-style |
Sets the outline style |
outline-style:inset; |
2 |
| outline-width |
Sets the outline width |
outline-width:thin; |
2 |
Dimensions
| Properties |
Definitions |
Examples |
CSS |
| width |
Sets the width of an element |
width:1000px; |
1 |
| max-width |
Sets the maximum width of an element |
max-width:75% |
2 |
| min-width |
Sets the minimum width of an element |
min-width:20em; |
2 |
| height |
Sets the height of an element |
height:600px; |
1 |
| max-height |
Sets the maximum height of an element |
max-height:50%; |
2 |
| min-height |
Sets the minimum height of an element |
min-height:2em; |
2 |
Font Properties
| Properties |
Definitions |
Examples |
CSS |
| font |
Sets all the font properties in one declaration |
font:11px bold italic Verdana, Geneva, sans-serif |
1 |
| font-family |
Sets the font family |
font-family:Georgia, "Times New Roman", Times, serif; |
1 |
| font-size |
Sets the font size |
font-size:18px; |
1 |
| font-style |
Sets the font style |
font-style:oblique; |
1 |
| font-variant |
Sets the font variant |
font-variant:small-caps; |
1 |
| font-weight |
Sets the font weight (boldness) |
font-weight:700; |
1 |
List Properties
| Properties |
Definitions |
Examples |
CSS |
| list-style |
Sets all properties in one declaration |
list-style:circle outside url(“list.gif”); |
1 |
| list-style-image |
Sets list image |
list-style-image:url("blue.png"); |
1 |
| list-style-position |
Sets whether position is inside or outside the flow of the list |
list-style-position:inside; |
1 |
| list-style-type |
Sets list type |
list-style-type:none; |
1 |
Margin Properties
| Properties |
Definitions |
Examples |
CSS |
| margin |
Sets all four sides of the margin in one declaration |
margin:25px 3px 5px 15px; |
1 |
| margin-top |
Sets the top margin |
margin-top:10px; |
1 |
| margin-right |
Sets the right margin |
margin-right:15px; |
1 |
| margin-bottom |
Sets the bottom margin |
margin-bottom:50px; |
1 |
| margin-left |
Sets the left margin |
margin-left:25px; |
1 |
Padding Properties
| Properties |
Definitions |
Examples |
CSS |
| padding |
Sets all four sides of the padding in one declaration |
padding:15px 30px; |
1 |
| padding-top |
Sets the top padding |
padding-top:30px; |
1 |
| padding-right |
Sets the right padding |
padding:right:10px; |
1 |
| padding-bottom |
Sets the bottom padding |
padding-bottom:50px; |
1 |
| padding-left |
Sets the left padding |
padding-left:25px; |
1 |
Positioning Properties
| Properties |
Definitions |
Examples |
CSS |
| bottom |
Sets the bottom margin edge for a box that is positioned |
bottom:30px; |
2 |
| clear |
Sets which sides floated elements are not allowed |
clear:both; |
1 |
| clip |
Clips an element that is absolutely positioned |
clip:rect(30px 0px 60px 90px); |
2 |
| cursor |
Specifies the cursor to be displayed within a certain element |
cursor:crosshair; |
2 |
| display |
Specifies which type of box an element should have |
display:inline; |
1 |
| float |
Specifies whether or not a box should float left or right |
float:left; |
1 |
| left |
Sets the left margin edge for a box that is positioned |
left:45px; |
2 |
| overflow |
Sets what happens if content were to overflow its box |
overflow:scroll; |
2 |
| position |
Sets how an element is positioned |
position:relative; |
2 |
| right |
Sets the right margin edge for a box that is positioned |
right:15px; |
2 |
| top |
Sets the top margin edge for a box that is positioned |
top:20px; |
2 |
| visibility |
Specifies whether or not an element is visible |
visibility:hidden; |
2 |
| z-index |
Specifies the stacking order of elements |
z-index:-1; |
2 |
Print Properties
| Properties |
Definitions |
Examples |
CSS |
| page-break-before |
Sets the page break before an element |
page-break-before:always; |
2 |
| page-break-after |
Sets the page break after an element |
page-break-after:auto; |
2 |
| page-break-inside |
Sets the page break inside an element |
page-break-inside:avoid; |
2 |
| orphans |
Sets the minimum number of lines there must be and the bottom of an element after a page break |
orphans:2; |
2 |
| windows |
Sets the minimum number of lines there must be and the top of an element after a page break |
windows:10; |
2 |
Table Properties
| Properties |
Definitions |
Examples |
CSS |
| border-collapse |
Specifies whether or not the border should be collapsed |
border-collapse:collapse; |
2 |
| border-spacing |
Specifies distance between adjacent cell borders |
border-spacing:15pt; |
2 |
| caption-side |
Sets placement of table caption |
caption-side:center; |
2 |
| empty-cells |
Sets whether or not borders of empty cells are displayed |
empty-cells:hide; |
2 |
| table-layout |
Changes the algorithm used for the table layout |
table-layout:fixed; |
2 |
Text Properties
| Properties |
Definitions |
Examples |
CSS |
| color |
Sets the color of text |
color:#ff9300; |
1 |
| direction |
Sets the writing direction of text |
direction:right; |
2 |
| letter-spacing |
Specifies distance between letters of text |
letter-spacing:.75em; |
1 |
| line-height |
Specifies distance between lines of text |
line-height:15px; |
1 |
| text-align |
Sets the alignment of text |
text-align:center; |
1 |
| text-decoration |
Specifies the decoration added to text |
text-decoration:overline; |
1 |
| text-indent |
Sets indentation of first line in a text block |
text-indent:25px; |
1 |
| text-shadow |
Sets the shadow text may have |
text-shadow:;#ccc 15px -10px 8px; |
2 |
| text-transform |
Controls the capitalization of text |
text-transform:uppercase; |
1 |
| vertical-align |
Sets the vertical alignment of an element |
vertical-align:middle; |
1 |
| white-space |
Sets how the white space inside an element will be used |
white-space:pre-wrap; |
1 |
| word-spacing |
Specifies the distance between words in a text block |
word-spacing:30px; |
1 |
Pseudo-classes and Pseudo-elements
| Properties |
Definitions |
Examples |
CSS |
| :active |
Applies specified style to an active element |
a:active {<styles>} |
1 |
| :after |
Adds content after an element |
a:after {<styles>} |
2 |
| :before |
Adds content before an element |
a:before {<styles>} |
2 |
| :first-child |
Adds specified styles to the first child element |
body:first-child {<styles>} |
2 |
| :first-letter |
Adds specified styles to the first letter of an element |
p:first-letter {<styles>} |
1 |
| :first-line |
Adds specified styles to the first line of text |
p:first-line {<styles>} |
1 |
| :focus |
Adds a focus to keyboard input |
input:focus {<styles>} |
2 |
| :hover |
Applies styles to an element that you hover over |
a:hover {<styles>} |
1 |
| :lang |
Adds style to an element with a lang attribute |
q:lang {<styles>} |
2 |
| :link |
Applies styles to a unvisited link |
a:link {<styles>} |
1 |
| :visited |
Applies styles to a link that has been visited |
a:visited {<styles>} |
1 |