p {color:red;text-align:center; } selector { propertyname : propertyvalue;}

1) id Selector #para1 {color:red;} 2) class selector .class1 {text-align:center;} 3) type selector div {text-align:center;}

refering css 1) external Add a link in head .. link rel="stylesheet" type="text/css" href="mystyle.css" 2) internal add style in head .. p {margin-left:20px;} 3) inline Add style in the element

background color div {background-color:#b0c4de;} background image div{background-image:url('gradient2.png');

Background image repeat settings body {background:#ffffff url('img_tree.png') no-repeat right top;}

h1 { height: 43px; background-image: url(images/title_snow.gif); background-repeat: no-repeat; }

background Sets all the background properties in one declaration background-attachment Sets whether a background image is fixed or scrolls with the rest of the page background-color Sets the background color of an element background-image Sets the background image for an element background-position Sets the starting position of a background image background-repeat Sets how a background image will be repeated

text manipulations h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} h4 {text-decoration:blink;} case changing p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;} indenting p {text-indent:50px;} other properties color Sets the color of text direction Specifies the text direction/writing direction letter-spacing Increases or decreases the space between characters in a text line-height Sets the line height text-align Specifies the horizontal alignment of text text-decoration Specifies the decoration added to text text-indent Specifies the indentation of the first line in a text-block text-shadow Specifies the shadow effect added to text text-transform Controls the capitalization of text unicode-bidi vertical-align Sets the vertical alignment of an element white-space Specifies how white-space inside an element is handled word-spacing Increases or decreases the space between words in a text

a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */ a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;} ul.a {list-style-type: circle;} ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;}

margin A shorthand property for setting the margin properties in one declaration margin-bottom Sets the bottom margin of an element margin-left Sets the left margin of an element margin-right Sets the right margin of an element margin-top Sets the top margin of an element

.thumbnail { float:left; width:110px; height:90px; margin:5px; } pseudo classes selector.class:pseudo-class {property:value;} a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */ .captioned_photo { float: right; margin: .5em 0 .5em 2em; padding: 0; line-height: 1em; width: 240px; } .captioned_photo p { width: 100%; margin: 0; padding: 1em 0; font: .75em/1.75em Verdana, sans-serif; color: #666; } .captioned_photo img { margin: 0; padding: 0; display: block; } .captioned_photo { position: relative; float: left; display: block; margin: .5em 1.25em .5em 0; padding: 1em; border: 1px solid #ccc; border-top-color: #eee; border-right-color: #ddd; border-bottom-color: #bbb; background: url(images/bg.gif) bottom left repeat-x; line-height: 1em; }

:link a:link Selects all unvisited links :visited a:visited Selects all visited links :active a:active Selects the active link :hover a:hover Selects links on mouse over :focus input:focus Selects the input element which has focus :first-letter p:first-letter Selects the first letter of every p element :first-line p:first-line Selects the first line of every p element :first-child p:first-child Selects every p elements that is the first child of its parent :before p:before Insert content before every p element :after p:after Insert content after every p element :lang(language) p:lang(it) Selects every p element with a lang attribute value starting with "it"

[title=W3Schools] { border:5px solid green; } Example [title~=hello] { color:blue; } input[type="button"] { width:120px; margin-left:35px; display:block; }