Backgrounds

Example

Body{
The background-color property
background-color:yellow;
is used to set the background
}
color of an element
body {
The background-image property
background-image: url("tuli.jpg");
is used to set the background
}
image of an element
background-repeat: repeat;
The background-repeat property
is used to control the repetition of
an image in the background. background-repeat: repeat-y;

background-repeat: repeat-x;
background-position:100px;
The background-
position property is used to
control the position of an image in background-position:100px 200px;
the background.

background-attachment: fixed;
The background-
attachment property is used to
control the scrolling of an image background-attachment:scroll;
in the background.

Fonts
The font-family property is used font-family:georgia,garamond,serif;
to change the face of a font.

The font-style property is used to font-style:italic;

make a font italic or oblique.
Possible values are normal, italic and oblique.

The font-variant property is used font-variant:small-caps;

to create a small-caps effect.
Possible values are normal and small-caps.

The font-weight property is used font-weight:bold;

to increase or decrease how bold
font-weight:bolder;
or light a font appears.
font-weight:500;

The font-size property is used to font-size:20px;

increase or decrease the size of a
font.
Text
color:red;
The color property is used to set the
color of a text.
direction:rtl;
The direction property is used to set the
text direction.
letter-spacing:5px;
The letter-spacing property is used to
add or subtract space between the
letters that make up a word.
word-spacing:5px;
The word-spacing property is used to
add or subtract space between the
words of a sentence.
text-indent:1cm;
The text-indent property is used to
indent the text of a paragraph.
text-align:right;
The text-align property is used to align
the text of a document.
text-decoration:underline;
The text-decoration property is used to text-decoration:line-through;
underline, overline, and strikethrough text-decoration:overline;
text. text-decoration:blink;
text-transform:capitalize;
The text-transform property is used to text-transform:uppercase;
capitalize text or convert text to text-transform:lowercase;
uppercase or lowercase letters.
text-shadow:4px 4px 8px blue;
The text-shadow property is used to set
the text shadow around a text.

Padding

The padding-bottom specifies the

The padding property allows you to
bottom padding of an element.
specify how much space should appear
between the content of an element and
The padding-top specifies the top
its border
padding of an element.
padding-top:15px;
The padding-left specifies the left
padding of an element.
padding: 10px 2% 10px 10px;
The padding-right specifies the right
padding of an element.

The padding serves as shorthand for

the preceding properties
Images
border:3px dashed red;
The border property is used to set the
width of an image border.

border:1px solid red; height:100px

The height property is used to set the
height of an image.

border:1px solid red; width:150px

The width property is used to set the
width of an image.

Links

The :link signifies unvisited hyperlinks.

The :visited signifies visited hyperlinks. a:link {color: #000000}

The :hover signifies an element that a:visited {color: #006600}

currently has the user's mouse pointer
hovering over it. a:hover {color: #FFCC00}

The :active signifies an element on a:active {color: #FF00CC}

which the user is currently clicking.
Tables

The border-collapse specifies whether

the browser should control the
appearance of the adjacent borders that
touch each other or whether each cell
should maintain its style.

The border-spacing specifies the width

that should appear between table cells.

The caption-side captions are

presented in the <caption> element. By
default, these are rendered above the
table in the document. You use
the caption-side property to control the
placement of the table caption.

The empty-cells specifies whether the

border should be shown if a cell is
empty.

The table-layout allows browsers to

speed up layout of a table by using the
first width properties it comes across for
the rest of a column rather than having
to load the whole table before rendering
it.

Lists
list-style-type:circle;
The list-style-type allows you to control
list-style-type:square;
the shape or appearance of the marker.
list-style-type:decimal;
list-style-type:lower-alpha;
list-style-type:lower-roman;

list-stlye-position:outside;
The list-style-position specifies
list-style-position:inside;
whether a long point that wraps to a
second line should align with the first line
or start underneath the start of the
marker.
list-style-image: url(/images/bullet.gif);
The list-style-image specifies an image
for the marker rather than a bullet point
or number.
list-style: inside square;
The list-style serves as shorthand for
the preceding properties.