Workshop Mission Services Portfolio Content Contact
  bookmark me  
Home > Content

(1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Color
You can define the color of text and background using CSS1.

'color'
Defines color of text. You have three methods available:

inherit
color name (green, red, black, etc.)
RGB value (0, 0, 255)

h1 {color: rgb(0, 200, 75)}

'background-color'
Defines the background color of an element. You have four methods:

transparent (default: element is transparent)
inherit
color name (green, red, black, etc.)
RGB value (0, 0, 255)

p {background-color: red}

Background
These CSS1 properties give designers greater control on the type and position of background elements like images.

'background- image'
This property defines the background image for an element. There are three choices:

none
inherit
valid URL (place image file location in quotes)

body {background-image: url("logo.gif")}

'background-repeat'
This property defines how the background image is tiled. You have 5 options:

repeat
repeat-x (only tiles horizontally)
repeat-y (only tile vertically)
no-repeat
inherit

body {background-repeat: repeat-x}

'background-position'
Defines the position of the background image using the upper left corner as a starting point. Several keywords such as 'top' and 'center' can be combined. There are four methods of positioning:

Pixel Distance - use two numbers - from the left - and from the top
Percent Distance - use two percentages - from the left - and from the top
Basic Positioning - top, center, bottom, left, and right
inherit

Pixel Distance

body {background-position: 50px 200px}


Percent Distance

body {background-position: 10% 40%}


Basic Positioning

body {background-position: top right}


Inherit

body {background-position: inherit}

'background-attachment'
This CSS1 property defines whether the background image is fixed or scrolls with the window. You have three options:

scroll (default - image scrolls with the window)
fixed (image is fixed [everything else moves when you scroll down] and only tiles horizontally)
inherit

body {background-attachment: scroll}

'background'
Like 'font' you can define all background image properties once. Of course, the default value will be applied if a property is not listed. Here is an example:

body {background: rgb(0, 200, 100) url("logo.gif") no-repeat scroll 150px 200px}

There are also CSS1 properties for margins, positioning, lists, and tables. I will address them in a future tutorial.

(1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

 

1.818.509.2649