Working With CSS Class and ID Selectors (Part 2)

By: Daniel Imbellino
Updated: Feb 28, 2013

We talked about id selectors and how they are useful for web page layout and organization. Another Selector that is likely to be of good use is the "Class" selector. The Class selectors are can be used to fine tune style information for particular elements within your HTML files.
Ex: .boldfont {font-weight: bold; color: blue; }
Class selectors are prefixed with a period to indicate a class selector is being used.
You can apply a class selector in several different ways.
Ex:
<style type="text/css">
body {background-image: url(http://example.com/example-image.png"); background-repeat: no-repeat; }
h1 {font-size: 45px; font-family: times new roman; color: black; text-align: center; }
p {font-size: 35px; font-family: times new roman; color: black; text-align: justify; }
.boldfont {font-weight: bold; color: blue; } </style>
</head>
<body>
<h1>This is a heading</h1>
<p><span class="boldfont">HTML</span> is a markup language used to display content, while CSS provides style formatting for that content</p>

What we just did was use the class selector we created named "boldfont" and applied it to our content in our p element in order to provide additional formatting. By declaring the "<span class=""> element, we implemented additional formatting for the the words "HTML" and "CSS" specifically. The additional formatting we assigned was used to change the words specified with the class element a font weight of bold, and a color change from black to blue. The rest of the text still retains its original formatting as specified with the p selector in our CSS.

Another way to use the Class selector is to provide additional formatting for a single or multiple elements that are defined in our HTML.
Ex:
<style type="text/css">
body {background-color: white; }
h1 {font-size: 50px; font-family: arial; color: red; text-align: center; }
h2 {font-size: 35px; font-family: arial; color: red; text-align: center; }
p {font-size: 25px; font-family: times new roman; color: black; text-align: left; }
.largefont {font-size: 65px; }
p.blue {color: blue; }
</style>
</head>
<body>
<h1 class="largefont">This is the First Heading</h1>
<h2>This is the Second Heading</h2>
<p class="blue">This is a paragraph</p>

What we just did is apply the ".largefont" class selector to our entire h1 element. We also applied the "p.blue" class selector to our p element. The "p" in "p.blue" means apply this style formatting for p elements only, while the ".largefont" selector was used to style the entire h1 element we defined. The <span class=""> element is likely of the most use to web designers as you can define additional formatting for an entire sentence, a single word, or even to a hyper text link, without affecting the rest of the surrounding content.

You can even use the class selectors inside of <div></div> tags, effectively overriding the style information defined in the div tags id selector. This is where id and class selectors can be effectively used together, as you can define your web page layout with your div tags, and add additional formatting use classes that are declared within your div's.