CSS is a set of standard controls that are supposed to be understood by the latest browsers. If a control is not understood, then the browser ignores the control.

Our Quick Reference classifies the CSS controls as follows:

1. Font Controls.

   Fonts are type faces. They affect the size and shape of the letters.

   For example, you could change the font-family to Arial or the font-style to italics. The font families are not listed in the CSS quick reference handout, but Teague has a list of families that are supported by various browsers, which I will hand out. On the Web, you could search Webmonkey, Webreview, or the Web Developer's Virtual Library for articles on font families.

2. Text Controls.

   Most of these controls affect the way text is aligned. For example, with ordinary HTML, paragraphs typically are double-spaced but not indented.

   Suppose that you wanted to use indented paragraphs. If you wanted to indent a paragraph, you would use CSS.
   Then, if you want the next paragraph to be single-spaced, that can be done with CSS.
3. List and Mouse Controls.

   List controls affect the appearance of bullets in unordered lists and numbers in ordered lists. Mouse controls affect how the mouse cursor appears on the screen. List and mouse controls are not really worth spending time on in this course.

4. Color and Background Controls.

   Color means the color of the text. Background can mean a background color, such as the blue background that these pages use in many places.

   Background also could be a background image or graphic that you can use for part or all of a page.
5. Margin and Border Controls.
   Margin and border controls are used to create this box. The background color is set by using a background control.

   These controls are used for creating boxes. The margin determines the amount of white space around the box. The border determines the shape and color of the line (if any) around the box. All of these diagrams are created using margin and border controls.

6. Visibility Controls.

   When you position one element on top of another, visibility controls dictate how the user sees the elements.

7. Positioning Controls. Force text and graphics
   into specific Positions

There are a number of ways to "mix and match" CSS controls. For example, you can try different combinations of text colors and background colors.

Another way to mix things up is to use "nesting," where you put one class inside another class. Nesting can be useful when you want to position one element relative to another element (in columns, for example). Or it can be used to create small variations within a larger class.

Ultimately, using CSS is a process of trial and error. Often, you have a hypothesis about how a certain control will affect the look on the page, but the only way to test the hypothesis is to try it. When things do not work out as exactly as planned, you go back and adjust.

In a "live" Web setting, where not every visitor to your site will be using the same browser, the trial and error process is even trickier. The same controls will look different under different browsers and on different operating systems. This is because the CSS standard has been changing, and browser support takes time to implement.