There are many times where you want to have a tag that has a variety of different styles based on the context that it is being used. The ability to have style changed based on the parent selector only solves some of these cases. To give you even more control over the specificity of an element, you have the ability to give the element a class. A class simply is a way of telling CSS that you want to use specific properties tied to the element. Classes are more specific than most other forms of specifying selectors and can be applied to any element you want to.
Usually you will define a class to handle a specific situation. An example of this would be if you wanted to have red text to be used to indicate critical pieces of information in your document. While you could use the style tag within a span tags, this becomes unwieldly if there are multiple attributes that you are defining. Take a look at the HTML below, and see for yourself
While using the style attribute does work, having a class indicating that text is critical does provide more useful information to the designer. If you have dozens of critical sections in a document and decided to change the color from red to dark red, you would then have to find all the instances of using the red color, while just changing the class does this for the class version. Making things even more confusing for the style method is the case where you use red for multiple things, you will not be sure which spans are for critical red sections and which spans are for angry red sections.
Setting up a class is trivially easy. You indicate that a class is being used in css by prefixing the class name with a dot. Each element can have as many classes as desired but remember that the later defined class takes precedence when there are matching attributes. You specify multiple classes by having a space between the classes. Here is some CSS that would be in the .css file or in a style block.
And to use thr classes
Classes can be applied to any element, so you could have angry bold text by using:
This makes classes a powerful way of adjusting style. We have been using color a lot here for our style demos, so lets properly cover that topic next.
A cheat sheet covering the basics of CSS.
A brief look at what CSS is and how it came to be.
A look at the three different ways to add style to your document.
Setting the style for different types of elements.
An easy way of having multiple styles on the same element type and across different elements.
The use of named colors, the RGB color model, and creating RGB colors.
Using hexadecimal color codes and other color models.
Controlling what text looks like.
The box model controls how elements are positioned within their layout box.
Anchor element states and turning a link into a button.
A total conversion of Hunt the Webbus with a Christmas Theme.
Lists can have style applied to their layout, placement, and bullet.
Tables have a grid as well as rows and columns that can be controlled.
The project for this chapter is a variation of a classic text game
My solution for the Webbus project
Converting the Webbus game into a Christmas game.