CSS Rules! Part 2
Home > Build > Programming
> CSS
by
Don Herion
(1)
(2) (3)
(4)
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.
