css code,css tutorial

By default, the background-image property repeats an image both horizontally and vertically.

Some images should be repeated only horizontally or vertically, or they will look strange, like this:

Source code

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

The background-color property specifies the background color of an element.

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

Source code

body {background-color:#b0c4de;}

With CSS, a color is most often specified by:

• a HEX value – like “#ff0000″
• an RGB value – like “rgb(255,0,0)”
• a color name – like “red”

Look at CSS Color Values for a complete list of possible color values.

In the example below, the h1, p, and div elements have different background colors:

Source code

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

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:

Source code

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

Below is an example of a bad combination of text and background image. The text is almost not readable:

Source code

body {background-image:url('bgdesert.jpg');}

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

This allows you to set a particular style for many HTML elements with the same class.

The class selector uses the HTML class attribute, and is defined with a “.”

In the example below, all HTML elements with will be center-aligned:

Source code

.center {text-align:center;}

The id selector is used to specify a style for a single, unique element.

The id selector uses the id attribute of the HTML element, and is defined with a “#”.

The style rule below will be applied to the element with id=”para1″:

Source code

#para1
{
text-align:center;
color:red;
}