LI.music {list-style-type:circle;} LI.movies {list-style-type: square;}
There are a few colors that you can control in CSS. The attributes of the body tag that controls the color of text, the background and links can all be set. You can use color names like "green" or hexidecimal color numbers like '#00ff00" or you can now use the rgb() operator. This takes three arguments that are either the decimal (not hex!) values of the red, green and blue parts of the color or they can be percentages. So, the hex number above would be
The colors of the links when they are in different states can be controlled (along with other properties) by using special selectors. These are:
First you can set the background color with the background-color property. Most tags make use of this property, so you could set the background color of a bold tag to get this effect.
Most elements can have a background image as well. So this paragraph is on top of a picture of Half Dome at Yosemite.
Notice two things. First, the whole image is not displayed, just enough to cover the text. Second, the image is repeated since the original is not wide enough to cover the entire area of the text.
There are some properties that can alter the repeating nature of background images. The background-repeat property has these values:
You can control the start position of the image using the background-position property. This takes a value that is two values separated by a space. The first value is the distance from the left edge of the space containing the block we are in, like a paragraph. The second value is the distance from the top of the block. These values can be in any distance unit or as a percent. They can also be keywords like left, center, right or top, center, bottom.
The background-attachment property controls whether the background image moves along with the block when it is scrolled. With a value of scroll, then the image moves along with the block. If it is fixed, then it stays put while everything else moves. This is handy if you want something like the corporate logo to always be on the page but not tiled all over. You make it the background image on the body, set the repeat property to no-repeat and the attachment property to fixed and it will be there. Kind of like the simple logo displayed on this page.