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:

letter-spacing:
 
white-space:
pre;
line-height:
Styling Links (a) a:link :
Set styles for a unvisited
a:link ; links that has no mouse
pointer over it.
a:visited
a:visited :Set styles for a
a:hover link the user has visited but
has no mouse pointer on it
a:active
a:hover:
Set styles for a link when
the user place the mouse
pointer over it.
a:active:
Set styles for a link that is
in the process of being
clicked
list-style-type:
Lists with CSS disc,circle,square,
decimal,decimal-leading-
zero,lower-roman,upper-
list-style-type: roman,
lower-greek.
list-style-position:
list-style-image:
20px;
 white-space: pre;
}
Note: The order of  a:link { /*
the pseudo classes unvisited link */
should be the  color: #FF0000;
following: :link, :visit text-decoration:
ed, :hover, :active, :fo none;
cus in order for these }
to work properly.  a:visited { /*
visited link */
 color: #00FF00;
 }
 a:hover { /*
mouse over link */
 color: #FF00FF;
 text-decoration:
underline;
 }
 a:active { /*
active link */
 color: #0000FF;
 }
CSS provides the  ul li {
several properties for
styling the most backgroun
commonly used d: #ffc0cb;

unordered and }
ordered lists.  ul.in li {
property takes the  list-style-
value inside or outside position: inside;
, 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;
text;wait;progress;crosshair
cursor: ;move
Handling scroll;auto;hidden;visible
overflow:
the CSS provides several
CSS Dimension properties such as width,
height, max-width and
ault;}
CSS overflow
property allowing you
to specify whether to
clip content, render
scroll bars or display
overflow content of a
block-level element.
div {
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
CSS3 Gradients allows you to create a
gradient from one color to
another without using anybackground: red; /*
images.
you can also create a
Linear Gradient - gradient along the diagonal for browsers that don't
Diagonal direction. The following
example will create a linear background: red; /*
gradient from the bottom
left corner to the top right
corner of the element's box.
If you want more control
Setting Direction over the direction of the
of Linear gradient, you can set the
angle, instead of the
Gradients predefined keywords.
linear-gradient(angle, color-
stop1, color-stop2, ...)
<div
for browsers that don't class="gradient"><
support gradients */ /div>
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); }
.gradient { /* Fallback <div
class="gradient"><
support gradients */ /div>
For Safari 5.1 to 6.0
*/ background: -
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); }
.gradient { /* Fallback <div
for browsers that don't class="gradient"><
support gradients */ /div>
background: red; /*
For Safari 5.1 to 6.0
*/ background: -
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
value circle or ellipse.
Values Accepted by
Overflow Text the word-wrap property
are: normal and break-
word.
Values Accepted by
Word Breaking the word-break property
Rules are: normal, break-
all and keep-all.
.box{ width: 200px; height:
Drop Shadows 150px; background: #ccc;
box-shadow: 5px 5px 10px
multiple box #999; }
shadow using a
comma-separated
list:
ou can use the text-
text- shadow property to apply
shadow Property the shadow effects on text.
Color type
HSL Colors
With name
For Safari 5.1 to 6.0
*/ 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); }
p { width: 200px;
background: #ffc4ff;
word-wrap: break-
word; }
p { width: 150px;
padding: 10px; }
p.break { background:
#bedb8b; word-break:
break-all; } p.keep {
background: #f09bbb;
word-break: keep-all;
}
.box{
width: 200px;
height: 150px;
background: #000;
box-shadow: 5px
5px 10px red, 10px
10px 20px yellow;
}
h1 { text-shadow: 5px
5px 10px #666; } h2 {
text-shadow: 5px 5px
10px red, 10px 10px
20px yellow; }
Hue, Saturation #p1 {background
and Lightness. -
color: hsl(120,
100%,
50%);} /*
green */
HSLA

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

HEXA