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
Be Sociable, Share!