CSS Color Properties - Templates Lesson
Before we begin the color properties I need to mention that I removed the "text-indent"
property and the code which removes underlining from the links.
Let's explore color and background properties
Every element in an HTML document has a foreground and background color. In some
cases the element can even contain a background image.
color and background properties:
- color
- background-color
- background-image
- background-repeat
- background-position
- background-attachment
I will demonstrate the first 4 properties
We've all used the "color" and "bgcolor" attributes to control the color of and entire page, a
block of text, or a table cell. Now we can use CSS properties
to control all 3 of these elements at our site, and eliminate the "color" and bgcolor" attributes from
the HTML code.
color property
I access the "mystyles.css" file and locate the contextual selector H4 and B. I
add the "color" property and assign a hexadecimal
value which produces the color rust.
H4 B {color:993300; text-decoration:none; font-weight:bold; font-style:normal; font-size:150%;}
As I view the page I notice that the page now displays the
phrase "there's a new pet in town" in rust. This text is surrounded by both the
h4 and B tags
The color property controls the foreground color of an element, it is most
commonly used to change the color of text.
If I want to control the color of an entire page or a table cell, I need to use
the
background-color property
In the body style I insert the background-color property with a hexadecimal value
which produces white.
BODY { background-color:ffffff; font-family:Arial, Helvetica, sans-serif; font-size: 12px; }
Before I view the file in the browser I access
the products pages and REMOVE more code. I remove
the "bgcolor" attribute from the opening body tag.
As I view the page it displays in white,
ho hum not very thrilling.
Just for fun lets turn all 3 pages "aqua" by changing a single CSS property. I
enter a hexadecimal value for blue green and then take another look at files.
BODY{ background-color:66ccff; font-family:Arial, Helvetica, sans-serif; font-size: 12px; }
Hey it worked, all 3 pages display in aqua. Unfortunately, I made quite a
mess. My images are not transparent and now every image has a white box around it.
I also find the aqua pages overwhelming, when experimenting with color,
expect surprising results, its part of the fun.
I revert back to a background-color of white.
BODY{ background-color:ffffff; font-family:Arial, Helvetica, sans-serif; font-size: 12px; }
Let's move on to the td selector.
Although the aqua was a bit much for the entire page it might look great as a
table cell color. I insert the "background-color" property into the td style.
TD { background-color:66ccff; font-family:Arial, Helvetica, sans-serif;}
As I view the navigation table I'm delighted with the results, my table cells now
closely resemble the look of my graphical buttons at the top of the page. I am able to change the
color of 8 table cells on all 100 of my products pages by simply inserting the
background-color property into my .css file.
Controlling page and text color is easier with CSS but it's not revolutionary, however
the ability to control the background color of ANY element is!!
Let's add the LI selector and insert a "background-color" of "salmon".
LI { background-color:ffcccc;}
As I view the page the items in the list look like they have been painted with
a highlight pen. Before you rush out and tell all your friends, about this slick
trick. I need to let you in on a little secret. Netscape 4.7 does not support the background-color
property for all elements so you may only be able to see this on IE.
background-image property
I have created 2 images
"aqua-blend.jpg" is a reflected gradient
"fish-blend.jpg" contains a clip art image and a standard gradient.
I have inserted the "background-image" property into the td style and declared a
value of "aqua-blend.jpg".
TD {background-image:url(aqua-blend.jpg); background-color:66ccff; font-family:Arial, Helvetica, sans-serif;}
I also insert a background-image property in the H3 selector
H3 { background-image:url(fish-blend.jpg);}
Look closely at the syntax, it does not follow the
pattern we have been using. The value of the image is surrounded by ( ... )
Lets take a look in the browser. The fish image is displaying across the entire heading 3
sentence, I don't like the look, it is to busy and too squished to see the
image. As I view the navigation table the effect is much better. The aqua images
load in each table cell behind the text, and provide more visual interest for my
navigation. This I like!
I am still not happy with the effect produced in the H3 heading above the jokes.
One problem is that the image repeats I'd like to have the image display only
once. I add the background-repeat property to the H3 selector and insert a value of
no-repeat.
background-repeat property
H3 { background-repeat:no-repeat; background-image:url(fish-blend.jpg);}
Now as I view the heading the image is displayed once, and then stops repeating.
The look is better, but still too squished. To solve this problem I need to skip ahead to
one of the box properties. I add the padding-top property and assign a value of
40px. The padding property distributes space along the top of the H3 heading.
H3 { background-repeat:no-repeat; padding-top:40px; background-image:url(fish-blend.jpg);}
As I view the file in my browser, I see that the image is now displaying one
time, and there is a great deal of space or "padding" above the heading text.
That concludes the color and background section of the demonstration
Huma + color properties
the "mystyles.css" file with color properties added, color properties are underlined for clarity.
BODY{ background-color:ffffff; font-family:Arial, Helvetica, sans-serif; font-size: 12px; }
P {text-align:justify; line-height:18px;}
H4 {text-decoration:line-through; font-style:italic;}
H4 B {color:993300; text-decoration:none; font-weight:bold; font-style:normal; font-size:150%;}
LI { background-color:ffcccc;}
TD {background-image:url(aqua-blend.jpg); background-color:66ccff; font-family:Arial, Helvetica,
sans-serif;}
H3 {background-repeat:no-repeat; padding-top:40px; background-image:url(fish-blend.jpg);}