HTML PRIMER

by Jim Gordley
2008-2016

Class selectors allow you to name your own elements but unlike id selectors they do not have to be unique.Class selectors can be shared amoung any element on in you HTML document. For example you want some text to be red without affecting other text in your document.

You learned erlier that creating an id is done by using the # symbol. Creating a Class selector is done by using the period symbol (.)

EXAMPLE
STYLE SHEET HTML
.coloredtext {color:red;} <span class="coloredtext>Some text</span>
<h2 class="coloredtext>A HEADING</h2>
<p class="coloredtext"The contents of an entire paragraph.</p>
THE RESULTS
The lazy brown dog jumped over the quick red fox.

A RED HERRING I MEAN HEADING

Using a single Class Selector in each of the above examples I was able to change the color of the text in each of the following HTML elements.

The span element <span>
The <h3> element
The <p>

Class selectors should be given logical names according to how they relate to the document. Lets say you have some text that you want to have a green hue and you make this happen using a class name of green. You now have a document or several documents that have elements with a class attribute of green.

EXAMPLE

<span class="green">

Next month you want to change that color to blue. It is an easy thing to do by simply changing the style sheet, but now you have blue text in any element that has green as it's name. It would make more since and be much easier to have a logical name like special_color or new_item

CLASS SELECTOR CLASS LAB
DO THIS WHY YOU DO IT
  1. On the task bar click the Notepad icon then select the index.html file.
    Scroll down and look for the PAGE CONTENT comment. A few lines below that
    you will see the <h2> element.

    Insert the highlighted code below.

    <h2 class="heading">

  2. Insert the same code to the <h3> element.

    <h3 class="heading">

    Save those changes.

  3. On the task bar click the Notepad icon then select the styles.css file.

    Add the highlighted class selector to the styles.css file.

    .heading {background-color:#dddddd;}

    Save those changes.

  4. Refresh the browser page.
This opens the index.html file for editing.









Assigns the class attribute with a value of "heading" to the <h2;> element

Assigns the same class atribute to the <h3> element





Opens the styles.css file for editing.



Creates the class selector that makes any element that has a class attribute with a value of heading to be light gray.
Notice that both headings share the same gray background. Using one class selector.
Controlling Width