CSS basics

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;
}