|
|
 |
Step 5 Introduction
Try out CSS while you are learning it with the Online HTML Editor
It's back to declarations in this lesson. Throughout step 5, we are going to learn about all the ways to change the color of your site. You've already had a good taste of how to change font colors from previous lessons, however we're going to go a little more in depth with this subject as well as showing you alternative ways to state the colors on your site....
Fg/Bg Color
Below are the declarations used to set the foreground and background color, respectively. Each variable is seperated by a "||" symbol:
color: (color);
background-color: (color) || transparent;
Now, note how I put the color variable in parentheses. You can state the color of an object in 3 ways: throught name, hexadecimal, or rgb code. Neither option is prefered, it just depends on whatever you are comfortable with. Most novices use the name, most programmers use hex, and most graphic designers use rgb code. Check out the snippet of CSS code below. Note that each declaration makes the color of the class's text white:
.COLOR1 { color: white; }
.COLOR2 { color:#ffffff; }
.COLOR3 { color: rgb(255,255,255); }
Background Images
The background image of a page is a vital part of the color layout. Whether you use a big colorful background or just a sidebar like this page does, the background is crucial. Knowing this, the designers of CSS designed 4 declarations for use on the background image. All of them are from HTML tags, however three of them were specifically invented for CSS use. Here are the three declarations below with each variable is seperated by a "||" symbol:
background-image: url(yourbackground.gif) || none;
background-repeat: repeat-x || repeat-y || no-repeat;
background-attachment: fixed;
background-position: pos1 pos2;
background-image - sets a background image on the page.
background-repeat - this adds customization to your background. You can now have it repeat in the X direction (right), the Y direction (down), or have it not repeat after one instance of the image. Don't add this tag to just have the background repeat.
background-attachment - a CSS code for all your IE users. Select fixed to not have the background scroll with the page text. A highly-requested declaration.
background-position - this is a little tough to explain. pos1 and pos2 are separate variables. pos1 is the X position and pos2 is the Y position to place the image on the screen. You can state each variable in px (pixels), % (percent), or combine both with common name. If you put in 150px 200px, the top left part of the image will be 150 pixels from the right and 200 pixels from the top of the browser window.
However, if you put in 20% 30%, the top left part of the image will not be placed in those coordinates. Instead, on the 20% coordinate of the browser window will be the part of the image 20% over from the left end of the image and the 30% coordinate will be placed the part of the image 30% over from the top. This ensures that the image never gets outside the realm of the browser's window, however it is a hassle to explain. Check out this page to see the correlation between the percentage and the common name.
CSS Color Advantages
CSS has a central advantage over HTML in that any tag can have all the color values listed above. For example, check out the sentence below:
Hey, look at how cool this text is!
Surpisingly, the above sentence was not made with a strewn-out table tag like HTML programmers are used to. Instead, it was made with a simple font tag. In fact, most of the CSS code you will see below wasn't used to put the background image on at all. This new way of programming has caused the rise of many sites that have a wide variety of background color for text. Check out the source code below:
<STYLE TYPE="text/css">
.COOLBACKING {
background-color: blue;
background-image: url(step5.jpg);
font-size: 14pt;
font-weight: bold;
}
</STYLE>
<font class="COOLBACKING"> Hey, look at how cool this text is! </font>
This is the end of step 5. In the next part you will learn
The hyperlink tag and psuedo-elements.
Next Step
CSS in 7 Easy Steps (Home)
© 2000 Nicolas Spiegelberg. All rights reserved
|
|
|
