Web Design - Web Authoring / Intro to CSS: Class Selectors
Sections:  Introduction  |  Section 1  |  Section 2  |  Section 3
Section Two:  Part A  |  Part B  |  Part C  |  Part D  |  Part E  |  Part F  |  Part G  |  Part H  |  Part I

Creating Class Selector Rules

Let's Create a Class Selector Rule

As mentioned earlier, class selector rules should be listed in the same location as type selector rules – in between the <style></style> tags which are placed between the <head></head> tags.

Imagine that you have been asked to create a web page for the Wilson High School Football team. You met with the coach to discuss layout and design ideas for the page.

In talking to the coach you learn that he has a page layout in mind. He would like a page developed that includes a big header centered at the top, paragraph text with a little information about this season's football team, a smaller header to higlight player stats, and finally paragraph text to list the player's individual stats.

From a design perspective, he would like to incorporate colors that match the school's colors and he would like to use clean text that is both easy to read and visually appealing. Since the page is supposed to highlight player stats, he wants the stat text to be slightly larger than the surrounding paragraph text. And finally, he wants to highlight players stats that are league leaders. He would like these stats to be listed in bold, red text.

You quickly develop the HTML elements required on the page. You then start to develop the CSS rule sets needed to address the coach's requirements. You decide on the following type selector rule sets:

  • body - to adjust the color of the background and the default text color
  • p - to adjust the font used within paragraph text
  • h1 - to adjust the font, color, and alignment of the big heading
  • h3 - to adjust the font and color of the smaller heading

These rules tackle most of the coach's layout and design requirements. However, they do not meet the coach's desire for slightly larger paragraph text for all stats listed and bold, red text for league leading stats.

After some consideration you decide to create two class selector rules; one that could be applied to the stats paragraph to create larger text size and one that could be applied to league leading stats displaying them in bold, red text.

Below are examples of the two class selector rules you might create for displaying the player’s stats on the local high school football web page:

attribute example

These two rules would of course be listed in between the <style></style> tags located in the <head></head> tags.

Next Next

© 2008 KCDL. All rights reserved.