CSS Styling Properties

Styling Backgrounds
Styling Text
Styling Fonts
Styling Links
Styling Lists
Styling Tables

1. Styling Backgrounds

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

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;}

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"

Property Values

Value Description
color Specifies the background color.
transparent Specifies that the background color should be transparent. This is
default
inherit Specifies that the background color should be inherited from the
parent element

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');}

The background of an element is the total size of the element, including padding and
border (but not the margin). By default, a background-image is placed at the top-left
corner of an element, and repeated both vertically and horizontally.

Property Values

Value Description
url('URL') The URL to the image
none No background image will be displayed. This is default
inherit Specifies that the background image should be inherited from the parent
element

Background-repeat

The background-repeat property sets if/how a background image will be repeated. By

default, a ba ckground-image is repeated both vertically and horizontally.

Property Values

Value Description
repeat The background image will be repeated both vertically and
horizontally. This is default
repeat-x The background image will be repeated only horizontally
repeat-y The background image will be repeated only vertically
no-repeat The background-image will not be repeated
inherit Specifies that the setting of the background-repeat property should
be inherited from the parent element
Example

Repeat a background-image only vertically:

body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}
Background-attachment

The background-attachment property sets whether a background image is fixed or scrolls

with the rest of the page.
Property Values

Value Description
scroll The background image scrolls with the rest of the page. This is default
fixed The background image is fixed
inherit Specifies that the setting of the background-attachment property should be
inherited from the parent element
Example

How to specify a fixed background-image:

body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}