[an error occurred while processing this directive]
Go to Bottom Nav - June 18, 2018 - No exercises at this time - ERRORblah Happy Holidays and Semester Break!

Classes in CSS allow HTML selectors to have more than one look; design considerations may call for paragraphs that have differing font sizes within a document.

Pseudo classes allow differing styles for the same item depending on its state as defined by the browser; a common usage is with hyperlinks.

Classes and ID

A class may be assigned to an HTML selector in your style definition by appending it to the selector with a dot (.). This class is then referred to with the class attribute in the element you want styled.

Here is an example. Suppose you wanted some paragraphs styled to indicate warnings and others to styled as a note to the previous paragraph. For this example, danger will be used as the class name for warning paragraphs, and fineprint will be used for note paragraphs. The style definitions might look something like those below.

p.danger	
	{
		color: red;
		font-size: 120%;
		font-weight: bold;
		padding: 1em;
		background-color: yellow;
		margin: auto 2em auto 2em;
		border-color: lime;
		border-width: 3px;
		border-style: dotted;
	}

p.fineprint	
	{
		font-family: Arial, Verdana, sans serif;
		font-size: 75%;
		width: 60%;
		text-align: justify;
		margin: 0 0 0 15%;
	}

The results look like this:

The "danger" class paragraph (<p class="danger">). This style might be used to warn the user about some hazard like:
"Unplug before immersion washing!"

And:

The "fineprint" paragraph (<p class="fineprint">). This style might be useful for those situations where the designer really wanted the user to squint! Product disclaimers, attributions, footnotes and the like could be done in this style.

Standalone Classes

Classes may stand by themselves without an HTML selector. This is convenient for simple changes like the color of the text or background like this example:

.wow	
	{
		color: fuchsia;
		background-color: lime;
	}

By using the class="wow" attribute, these style definitions are easily added to the strong tag, emphasis or other inline tags that can use the definitions.

Standalone classes can also be assigned to block level elements such as this paragraph. Really pops out, eh?

Standalone classes can also be used with the div or span tags instead of the usual HTML tags. Use your imagination for inspiration.

ID

ID is similar to class except any specific ID may only be used once per page. An id definition might look like this:

p#fred	
	{
		color: yellow;
		background-color: teal;
	}

A paragraph with the id value equals fred.

The syntax is similar to class except the "#" (hash or pound symbol) is used instead of a "." (dot). As with stand alone classes, you may have a stand alone id too, it starts with "#" instead of "."

Summary

Use a class to define repeating or multiple items on a page; use an id to define unique items in a page.

Pseudo Classes

Pseudo classes are assigned depending on the state of the element as defined by the browser. The state is separated from the selector by a colon. This feature works with most of the latest model browsers; be sure test with less capable browsers to make sure the results are still usable.

An attractive usage is with links. Here are some example definitions for a class of links called "play":

a.play:link	
	{
		color: blue;
		font-size: 110%;
		text-decoration: none;
	}
a.play:visited	
	{
		color: green;
		font-size: 110%;
		text-decoration: none;
	}
a.play:focus
	{
		color: purple;
		font-size: 130%;
		text-decoration: underline overline;
		background-color: yellow;
		text-transform: uppercase;
	}
a.play:hover	
	{
		color: purple;
		font-size: 130%;
		text-decoration: underline overline;
		background-color: yellow;
		text-transform: uppercase;
	}
a.play:active	
	{
		color: red;
		font-size: 200%;
		text-decoration: underline overline;
		background-color: yellow;
		text-transform: uppercase;
	}

Here are some links that use the attribute class="play":

Pseudo Elements

Here are a couple of pseudo elements to play with; they are assigned to a class of paragraph called "pseudo_element_example".

p.pseudo_element_example:first-line
	{
		font-variant: small-caps;
		font-weight: bold;
	}

p.pseudo_element_example:first-letter	
	{
		font-size: 300%;
		font-family: Times New Roman, Palatino, serif;
		color: navy;
		letter-spacing: -3px;
	}

This paragraph uses class="pseudo_element_example" as an attribute. Notice that the formatting changes as the browser window is changed in width. The browser decides how wide the first line of the paragraph and which letter is the first.

Considerations for Past and Future

If memory serves, earlier browsers were confused if the class name started with numerals or characters other than letters. Instead of naming a class "14px-arial", use "arial-14px" instead. XHTML will also require that all class names are lower case. There is also a list of reserved names that javascript uses in the appendix of your textbook; avoid using them as class names because they can confuse the browser.

Heading One
Ut pharetra, ante eget imperdiet ullamcorper, tortor nunc sollicitudin orci, non cursus neque nisl eget ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum, nibh in suscipit interdum, velit magna volutpat turpis, at ornare sem magna et tellus. Sed pulvinar facilisis ligula, id vehicula eros sollicitudin a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Heading Two
Vivamus vestibulum, augue id iaculis sodales, odio odio feugiat arcu, scelerisque congue nisi ipsum vitae orci. Nunc sed ligula quam. Cras sed iaculis neque. Proin ultricies consectetur tortor, eu pulvinar sapien commodo ac. Cras diam arcu, lacinia id mattis ut, convallis sed massa. Nullam ut arcu lacus. Suspendisse ultricies elementum arcu ut dictum.
Heading Three
Sed aliquet augue ut ligula porta gravida pellentesque sapien semper. Duis mauris massa, semper pulvinar eleifend id, tincidunt fermentum nulla. Proin ipsum neque, imperdiet in vestibulum non, hendrerit ac nisi. Maecenas eleifend libero quis urna lacinia elementum. Etiam mi massa, sollicitudin nec accumsan in, aliquet in dui. Pellentesque consequat diam quis felis luctus a vehicula lectus mollis.
Pull Down Menu Close Menu