Generic Classes

You can also create generic classes which can be used with multiple tags. Here are a couple of different ones.

.glow {color: orangered}

.wide {letterspacing: 2px}

.tall {line-height: 150%}

.fat (font-weight: bold}

Add that to your style sheet or document styles. The try it out with several different tags

Write the code out like this: <h1>Here's an h1 header.</h1> to get this header:

Here's an h1 header.

Write the code out like this:<h1 class="glow">Here's an h1 header with the class attribute "glow".</h1> to get this header:

Here's an h1 header with the class attribute "glow".

Write the code out like this: <p>Here is a paragraph with not very much text.</p> to get this paragraph:

Here is a paragraph with not very much text.

Add a couple of different generic classes attribute to the p tag <p class="glow">Here is a paragraph with the class "glow".</p> to get this paragraph:

Here is a paragraph with the class "glow". You can make multiple generic classes with just one defined value and put them together on various ways to change a number of pieces of your html page. If you made three or four generic classes, you could use one or up to all four on each element. There could be a number of resulting combinations. See how different you can make each paragraph look depending on what classes are added.

Add a couple of different generic classes attribute to the p tag leaving a space between each class name <p class="glow wide tall fat"> to get this paragraph:

Here is a paragraph with the class "glow". You can make multiple generic classes with just one defined value and put them together on various ways to change a number of pieces of your html page. If you made three or four generic classes, you could use one or up to all four on each element. There could be a number of resulting combinations.See how different you can make each paragraph look depending on what classes are added.

See how different each paragraph looks? Lets try it with the headline also.

Write the code out like this:<h1 class="glow wide">Here's an h1 header where the class="glow wide".</h1> to get this header:

Here's an h1 header where the class="glow wide".

Be sure to add the period before the class name when you define it in your styles but do not use it in with the tag class attribute. Read more about using classes in the book.