CSS Style Property Quick Reference
Notation Used Below -- Each style property lists an example value or a list|of|possible|values
-- A default value for a property is given in bold.
Text Properties -- When set for a block, controls all text within the block.
font-family: Verdana, Helvetica, sans-serif; /* default value inherited from parent container */
font-size: 110%|1.1em|20px|16pt; /* default value inherited from parent container /
font-weight: normal|bold|600|700|800|900; /* available numeric values depend on the font being used */
font-style: normal|italic|oblique;
text-decoration: none|underline|overline|…;
text-indent: 20px|5em|10%;
text-align: left|right|center|justify;
line-height: 2.0|20px|200%|16pt;
vertical-align: baseline|text-top|text-bottom|top|middle|bottom; /
General Properties -- Mostly used for blocks, but some can be applied to inline elements as well.
color: #ff0000;
background-color: #ff0000;
cursor: auto|crosshair|help|move|pointer|progress|test|wait|…;
background-image: url("images/bg.gif");
background-repeat: repeat|repeat-x|repeat-y|no-repeat;
background-position: left top|left center|left bottom|center top|…; /* can also position with % or px */
background-size: 100px 100px; /* width height */ /* OR background-size: cover; (for full-page background) */
background-attachment: scroll|fixed;
margin: 3px; /* sets all 4 margins the same */
margin: 5px 10px 15px 20px; /* T R B L */
Same as individually setting margin-top, margin-right, margin-bottom, margin-left
padding: 3px; /* sets all 4 paddings the same */
padding: 5px 10px 5px 10px; /* T R B L */
Same as individually setting padding-top, padding-right, padding-bottom, padding-left
border: 1px solid #000000;
Same as individually setting border-width, border-style, border-color
Values of border-style: solid|dotted|dashed|double|groove|ridge
Can get more specific border-top-color, border-bottom-style, …
border-radius: px|%;
Can get more specific border-top-left-radius, border-top-right-radius, …
width: px|%; /* see also min-width and max-width properties */
height: px|%; /* see also min-height and max-height properties */
overflow: auto|visible|hidden|scroll; /* content overflow control for fixed dimension blocks */
box-sizing: content-box|border-box; /* how block width is calculated */
position: static|relative|fixed|absolute;
top: px|%; /* for position of non-static blocks */
left: px|%; /* for position of non-static blocks */
z-index: 1|2|3|…; /* for stacking absolute position blocks */
float: none|left|right;
clear: none|left|right|both;
display: inline|block|inline-block|none; /* none removes from page layout flow */
visibility: visible|hidden; /* hidden leaves in page layout flow */
opacity:0.6; /* 0.0 to 1.0 */
box-shadow: 10px 10px 5px #888888; /* See W3Schools for what these values mean */
text-shadow: 2px 2px #ff0000; /* See W3Schools for what these values mean */
Rule Properties -- Dynamic Properties, called CSS Rules, that induce some sort of action.
@font-face -- Specifies a portable, downloadable font for the page -- see W3Schools.
@media -- Specifies Media Query rules for dynamically adjusting to different screen sizes (monitor, tablet, phone) -- see W3Schools.
Lists and Tables -- See W3Schools for a variety of techniques. (Google Search for "CSS tables" or "CSS lists")
Properties Lacking Browser Support -- Some new properties are not yet uniformly supported in all browsers.
Browser-specific properties are prefixed by browser: -webkit (Chrome,Safari,Opera) , -moz (FireFox) , -ms (Internet Explorer)
Many Developers don't use these until they achieve uniform browser support and can be used without prefixes.
Examples: -webkit-column-count , -moz-column-count
-webkit-flex , –moz-flex , –ms-flex
