Cascading Style Sheets: Lists, cursors, color and backgrounds

Reading Chapter 6
You can control the appearance of list elements and the bullets in front of them using CSS. The list-style-type property controls the kind of bullet. The choices are: You can use this with an image (list-style-image) to get custom bullets. If the image isn't available, or doesn't display, the bullet is controlled by the list_style_type property so it is always good to have both. Lastly, you can control where the text in the LI tag lines up if it is more than one line. This involves the list-style-position property. It has two values: If you want to vary the appearance of items in the same list, you can change the list properties for each one, or you could create a class for each of the different types and use the class in the LI tags. By making the classes specific to the LI tag, you can show that it should only be used with those tags. For example,

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

rgb(0,255,0) or as percentages
rgb(0%,100%,0%)

The colors of the links when they are in different states can be controlled (along with other properties) by using special selectors. These are:

A.visited - for the state when the link has already been clicked on.
A.link - for links that haven't been visited yet.
A.active - for links that are being clicked on now.
A.hover - for links where the mouse is over them.

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.