Scribd
Upload
23 views1 page

Chap2.2 - Résumé CSS

Uploaded by

Meriem Ben ali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
23 views1 page

Chap2.2 - Résumé CSS

Uploaded by

Meriem Ben ali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

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

You might also like