CSS background properties are used to define the background effects of an element.

CSS properties used for background effects:

background-color
background-image
background-repeat
background-attachment
background-position

1. Background Color
-------------------
The background-color property specifies the background color of an element.

The background color of a page is defined in the body selector:

Example

body {background-color:#b0c4de;}

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

2.Background Image
----------------------------
The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

The background image for a page can be set like this:

Example

body {background-image:url('paper.gif');}

3. Background Image - Repeat Horizontally or Vertically:
---------------------------
If the image is repeated only horizontally (repeat-x), the background will look better:

Example

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

4. Background Image - Set position and no-repeat
-------------------------------------------
When using a background image, use an image that does not disturb the text.

Showing the image only once is specified by the background-repeat property:

Example

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

5. Background - Shorthand property
------------------------------------
As you can see from the examples above, there are many properties to consider when dealing with backgrounds.

To shorten the code, it is also possible to specify all the properties in one single property. This is called a shorthand property.

The shorthand property for background is simply "background":

Example

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

1. Text Color
---------------------
The default color for a page is defined in the body selector.

Example

body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

2. Text Alignment
----------------------
Example

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

3. Text Decoration
------------------------
Example

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

4. Text Transformation
---------------------------
Example

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

5. Text Indentation
---------------------------
The text-indentation property is used to specify the indentation of the first line of a text.

Example

p {text-indent:50px;}

1. Font Family
------------------------
The font family of a text is set with the font-family property.
Example

p{font-family:"Times New Roman", Times, serif;}

2. Font Style
-------------------------
The font-style property is mostly used to specify italic text.

This property has three values:

normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
Example

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

3. Font Size
-------------------------
The font-size property sets the size of the text.
Example

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

Styling Links
---------------
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

Special for links are that they can be styled differently depending on what state they are in.

The four links states are:

a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
Example

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 */

When setting the style for several link states, there are some order rules:

a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover
Common Link Styles

In the example above the link changes color depending on what state it is in.

Lets go through some of the other common ways to style links:

Text Decoration
-----------------------------
The text-decoration property is mostly used to remove underlines from links:

Example

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

Background Color
---------------------
The background-color property specifies the background color for links:

Example

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}