|
(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) |