Property Name value Description Example


 HEX value - like "#ff0000" The background- body {
Background color property is used background-
 an RGB value - like
Color to set the background color: #f0e68c;
"rgb(255,0,0)"
color of an element.  }
 a color name - like "red"

;
 By default  body {
 background-image: the background-  background-
Background -
url("abc/leaf.jpg"); image property image:
Image
repeats an image both url("leaf.jpg");
horizontally and  }
vertically.
repeat-x; You can set a  body {
background image  background-
repeat-y; repeat vertically (y- image:
no-repeat; axis), horizontally (x- url("gradient.png");
axis), in both  background-
directions, or in repeat: repeat-x;
background- neither direction.  }
repeat:
background- : fixed; The background-  body {
attachment attachment property 
determines whether 
the background image
is fixed with regard to background-
the viewport or scrolls image:
along with the url("recycle.jpg");
containing block.  background-
attachment: fixed;
 }

Repeat; The background- Space:

repeat-x; repeat property sets
repeat-y; if/how a background whitespace is
no-repeat; image will be distributed evenly
Background- space; repeated. between the
repeat round;
images.
By default,
a background- Round:
image is repeated both fill the space (no
vertically and gaps)
horizontally
 left top; background image is  body {
background- left center; positioned at top-right background-
left bottom; corner and the image:
positi right top; position of the image url("tree.png");
right center; is specified by  background-
right bottom;
the background- repeat: no-repeat;
center top;
position  background-
background- center;
center bottom position: 100% top;
size: contain;  }
background:
url("images/birds.p
ng") no-repeat
background- center,
size: cover; url("images/clouds.
png") no-repeat
center, lightblue;
properties for styling  h1 {
Fonts font-style: fonts of the text  font-size: 24px;
normal, italic or oblique content, like: 
font-family: Font-size: font-weight property  font-size:
font-style: xx-small, x- specifies the weight or 2em; /*
small, small, medium, large
font-size: boldness of the font. 32px/16px=2em */
, x-large, xx-large
font-weight:  font-size:
font-weight: 62.5%; /* font-
normal, bold, bolder, lighter size 100% = 16px
*/
 }

CSS text properties  a{
Formatting Text color: #ff0000; allow you to define  text-decoration:
several text styles none;
text-align: such as color,  border-bottom:
color: left, right, center, justify 1px dotted;
alignment, spacing,
decoration,  }
text-align: text-decoration: transformation etc.  p.one {
very easily an  word-spacing:
text-decoration: none, underline, overline, li effectively. 20px;
ne-through a{  }
text-transform: text-decoration:none; p.two {
text-transform: }  word-spacing:
20px;
text- none, capitalize, uppercas  text-align:
indent:100px; e, lowercase justify;
 }
word-spacing:  p.three {
 word-spacing:
 20px;
letter-spacing:  white-space: pre;
  }
white-space:
pre;

line-height:
Note: The order of  a:link { /*
Styling Links (a) a:link : the pseudo classes unvisited link */
should be the  color: #FF0000;
Set styles for a unvisited following: :link, :visit text-decoration:
a:link ; links that has no mouse ed, :hover, :active, :fo none;
pointer over it. cus in order for these }
a:visited to work properly.  a:visited { /*
a:visited :Set styles for a visited link */
a:hover link the user has visited but  color: #00FF00;
has no mouse pointer on it  }
a:active  a:hover { /*
a:hover: mouse over link */
 color: #FF00FF;
Set styles for a link when  text-decoration:
the user place the mouse underline;
pointer over it.  }
a:active:  a:active { /*
Set styles for a link that is active link */
in the process of being  color: #0000FF;
clicked  }

list-style-type: CSS provides the  ul li {

Lists with CSS disc,circle,square, several properties for
decimal,decimal-leading- styling the most backgroun
zero,lower-roman,upper- commonly used d: #ffc0cb;
list-style-type: roman, 
unordered and }
lower-greek.
ordered lists.  ul.in li {
list-style-position: property takes the  list-style-
value inside or outside position: inside;
list-style-image: , with outside being  }
the default.  ul.out li {
 list-style-
list-style-image: position: outside;
 }
set an image as a list  ul li {
marker using the list- list-style-image:
 style-image property url("arrow.png");
 }

 auto — Use an automatic  table {

Styling Tables table layout algorithm.  border-collapse:
With this algorithm, the collapse;
Border: widths of the table and its  }
cells are adjusted to fit the  table, th, td {
content. This is default.  border: 1px solid
border-collapse:
 fixed — Use the fixed table black;
collapse; layout algorithm. With this  }
algorithm, the horizontal
border-spacing: layout of the table does not  th, td {
10px; depend on the contents of  padding: 15px;
the cells; it only depends on
 }
the table's width, the width
caption-side: of the columns, and borders
or cell spacing.  table {
 border-spacing:
table-layout:
10px;
 }
border-spacing:  table {
 width: 300px;
empty-cells:  table-layout:
fixed;
 }
 table {
 border-collapse:
separate;
 empty-cells:
hide;
 }
 caption {
 caption-side:
bottom;
 }

Box model :every box has Note: In CSS box

BOX Model a content area and optional model; content area of
surrounding margin, the element's box is
padding, and border. the area, where text,
Total Width: images, lists, tables,
width + padding-
forms, videos, etc.
Total Height left + padding-
right + border-left + border- appears.
right + margin-
left + margin-right
 height + padding-
top + padding-
bottom + border-
top + border-
bottom + margin-
top + margin-bottom
Margin:top/bottom/left/rig If one value is set,  h1 {
Margin ht/ this is applied to all  margin: 0 10px;
Properties the four sides.  }
 p{
(TRBL)  If two values are
Margin:  margin: 25px
specified, the first
50px 75px 100px;
padding:top/bottom/left/rig value is applied to the
ht/ }
Padding: top and bottom, and 
h1 {
(TRBL) the second value is 
padding: 10px
Border-style: applied to the right
Border- 20px;
and left side.
style:none, hidden, dashed,  }
dotted, double, groove, inse If three values are  p{
t, outset, ridge and solid. specified, the first  padding: 10px
value is applied to the 15px 20px 25px;
top, second value is  }
applied to left and
right side and the last
value is applied to the
bottom.
 If four values are
specified, they are
applied to the top,
right, bottom and the
left side respectively
in the specified order.

cursor css cursor: a:hover{cursor:def

default;pointer; ault;}
text;wait;progress;crosshair
cursor: ;move
Handling scroll;auto;hidden;visible CSS overflow
overflow: property allowing you
to specify whether to
clip content, render
scroll bars or display
overflow content of a
block-level element.
the CSS provides several div {
CSS Dimension properties such as width,
height, max-width and height:
 max-height etc. that allows 200px;
width, height, you to control the
dimension of a box. The min-height:
max-width max- following section will 300px;
describe you how to use
height these properties to create a
background
better web page layout.
: #FFC0CB;
min-height: }
min-width:
display: block; The CSS display The block value of
CSS Display display: inline; property is one of the the display
display: inline-block; most powerful and property forces an
display: none; useful properties in all element to behave
the CSS. It can be like block-level
very useful for element, like a
creating web pages <div> or <p>
that looks in a element.
different way, but still
follow the web
standards.

CSS Positioning position: Static

Methods elements are positioned
static by default.
position: Static
elements are not affected
Position:relative by top, bottom, left, right
properties.
Position:absolute
Position:relative=>
Position:fixed elements are affected by
top, bottom, left, right
properties.

Position:absolute=>

the box is shifted from

this normal position
according to the
properties —
top or bottom and/or left
or right.

An absolutely positioned
element is positioned
relative to the first parent
element

that has a position other

 than static.

Position:fixed

The only difference is, a

fixed positioned element is
fixed with respect to the
browser's viewport and
does not move when
scrolled.

Floating Float:left/right/none
Elements Note: This property can
clear an element only
Float: from floated boxes within
the same block. It doesn't
clear: left; clear the element from
floated child boxes within
the element itself.

CSS Alignment text-align:

center/left/right
text-align: center; Note: The value auto for
the margin property will not
margin: 0 auto; work in Internet Explorer 8
and earlier versions, unless
position: a <!DOCTYPE> is
absolute; specified.

CSS position in
conjunction with
the left, right, top and bot
tom property
Using anchor pseudo-  a:link {
Pseudo-class classes links can be  color: blue;
displayed in different ways }
 a:visited {
 text-decoration:
none;
 }
 CSS3 introduced a new p::first-line { Note: The CSS
Pseudo-elements double-colon (::) syntax for color: #ff0000; properties that can
pseudo-elements font-variant: be applied to
small-caps; the ::first-
} line pseudo-
element are: font
properties, backgro
und
properties, color, w
ord-spacing, letter-
spacing, text-
decoration, vertical
-align, text-
transform, line-
height.
The ::before and ::after pse @media screen{  h1::before {
::before and udo-elements can be used  body {  content:
::after Pseudo- to insert generated content  color: #32cd32; url("images/marker
either before or after an  font-family: -left.gif");
element element's content. Arial, sans-serif;  }
Pseudo-elements  font-size: 14px;  h1::after {
p.article::first-letter {
and CSS Classes   }  content:
color: #00ff00;
 font-size: xx-large;  } url("images/marker
 }  @media print { -right.gif");
Media type
<style>  body {  }
 @import  color: #ff6347;

url("css/screen.css") screen; font-family:
 @import Times, serif;
url("css/print.css") print;  font-size: 12pt;
 body {  }
 background: #f5f5f5;  }
 line-height: 1.2;
 @media screen, print
 }
</style> {
 body {
 line-height: 1.2;
 }
 }

 p{
opacity  opacity: 0.7;
 }

 [title] {
[attribute]  color: blue;
Selector  }
 a[target="_blank "] {
 border: 1px solid green;
  }

 border: 2px solid #f08080; border: 15px solid

CSS3 Borders  border-radius: 20px; transparent;
 -webkit-border-
background- image:
clip Property url("border.png") 30
30 round; /* Safari
3.1-5 */
background-clip: border-  -o-border-image:
background- box/padding-box/content- url("border.png") 30
clip Property box 30 round; /* Opera
11-12.1 */
background-  border-image:
url("border.png") 30
origin: content- 30 round;
Note: The backgroun
box;
d-origin property is
ignored if the value
of background-
attachment property is
specified as 'fixed'.
background:
Multiple url("images/birds.png") no-
Backgrounds repeat center,
url("images/clouds.png")
no-repeat center, lightblue;
 The CSS3 gradient feature.gradient { /* Fallback <div
CSS3 Gradients allows you to create a for browsers that don't class="gradient"><
gradient from one color to
support gradients */ /div>
another without using anybackground: red; /*
images. For Safari 5.1 to 6.0
*/ background: -
webkit-linear-
gradient(red, yellow);
/* For Internet
Explorer 10 */
background: -ms-
linear-gradient(red,
yellow); /* Standard
syntax */ background:
linear-gradient(red,
yellow); }
you can also create a .gradient { /* Fallback <div
Linear Gradient - gradient along the diagonal for browsers that don't class="gradient"><
Diagonal direction. The following support gradients */ /div>
example will create a linear background: red; /*
gradient from the bottom For Safari 5.1 to 6.0
left corner to the top right
*/ background: -
corner of the element's box.
webkit-linear-
gradient(bottom left,
red, yellow); /* For
Internet Explorer 10
*/ background: -ms-
linear-
gradient(bottom left,
red, yellow); /*
Standard syntax */
background: linear-
gradient(to top right,
red, yellow); }
If you want more control .gradient { /* Fallback <div
Setting Direction over the direction of the for browsers that don't class="gradient"><
of Linear gradient, you can set the support gradients */ /div>
angle, instead of the background: red; /*
Gradients predefined keywords. For Safari 5.1 to 6.0
linear-gradient(angle, color-
*/ background: -
stop1, color-stop2, ...)
webkit-linear-
gradient(0deg, red,
yellow); /* For
Internet Explorer 10
*/ background: -ms-
linear-gradient(0deg,
 red, yellow); /*
Standard syntax */
background: linear-
gradient(90deg, red,
yellow); }
You can also create .gradient { /* Fallback <div
Linear Gradients gradients for more than two for browsers that don't class="gradient"><
Using Multiple colors. The following support gradients */ /div>
example will show you how background: red; /*
Color to create a linear gradient For Safari 5.1 to 6.0
using multiple color stops.
*/ background: -
All colors are evenly
spaced. webkit-linear-
gradient(red, yellow,
lime); /* For Internet
Explorer 10 */
background: -ms-
linear-gradient(red,
yellow, lime); /*
Standard syntax */
background: linear-
gradient(red, yellow,
lime); }
You can repeat linear .gradient { /* Fallback
Repeating the gradients using for browsers that don't
Linear Gradients the repeating-linear- support gradients */
gradient() function. background: white; /*
For Safari 5.1 to 6.0
*/ background: -
webkit-repeating-
linear-gradient(black,
white 10%, lime
20%); /* For Internet
Explorer 10 */
background: -ms-
repeating-linear-
gradient(black, white
10%, lime 20%); /*
Standard syntax */
background:
repeating-linear-
gradient(black, white
10%, lime 20%); }
The shape argument of .gradient { /* Fallback
Shape of Radial the radial- for browsers that don't
Gradients gradient() function is used support gradients */
to define the ending shape background: red; /*
of the radial gradient. It can
 take the For Safari 5.1 to 6.0
value circle or ellipse. */ background: -
webkit-radial-
gradient(circle, red,
yellow, lime); /* For
Internet Explorer 10
*/ background: -ms-
radial-gradient(circle,
red, yellow, lime); /*
Standard syntax */
background: radial-
gradient(circle, red,
yellow, lime); }
Values Accepted by p { width: 200px;
Overflow Text the word-wrap property background: #ffc4ff;
are: normal and break- word-wrap: break-
word. word; }
Values Accepted by p { width: 150px;
Word Breaking the word-break property padding: 10px; }
Rules are: normal, break- p.break { background:
all and keep-all. #bedb8b; word-break:
break-all; } p.keep {
background: #f09bbb;
word-break: keep-all;
}
.box{ width: 200px; height: .box{
Drop Shadows 150px; background: #ccc; width: 200px;
box-shadow: 5px 5px 10px height: 150px;
multiple box #999; }
shadow using a background: #000;
box-shadow: 5px
comma-separated 5px 10px red, 10px
list: 10px 20px yellow;
}

ou can use the text- h1 { text-shadow: 5px

text- shadow property to apply 5px 10px #666; } h2 {
shadow Property the shadow effects on text. text-shadow: 5px 5px
10px red, 10px 10px
20px yellow; }
Hue, Saturation #p1 {background
Color type
HSL Colors and Lightness. -
color: hsl(120,
100%,
With name
50%);} /*
green */
HSLA

Colors
rgba colors Red,green,blue,alpha #p1 {background
-
color: rgba(255
, 0, 0,
0.3);} /* red
with opacity */
RGB

HEXA