Classes & IDs

CSS Classes

Sometimes when using CSS you may want certain HTML elements (or tags) to look different than all the rest of them. For example, you want the font to be large and blue, while the rest of the time you want the font to be small and black. CSS allows you to do with with Classes.

Classes are used in your CSS as a selector, and are specified in a period (.) before the selector name. Then, in your HTML you need to use “class” as an attribute equaled to the name of your class (from the CSS).

The Span Tag

The <span> tag is used in our HTML code to make individual characters, words, or paragraph stand out. With the span tag we need to use a class (defined in the CSS) as the attribute. For example: <span class="greenwords">This words will be green</span>. The class called “greenwords” should be defined in the CSS to be green. Spans are nice because they work in line with your text and do not force a line break. Look at the example below to see how classes and spans are used.

Example 1a – The CSS Code 
p {
color:green;
}
.first {
color:blue;
}
p.second {
color:red;
}
.bigorange {
font-size:30px;
color:orange;
}
Example 1b – The HTML Code 
<html>
<body>
<h1 class="first">This a heading that uses the .first CSS code.</h1>
<p class="second">This is first paragraph that uses the p.second CSS code.</p>
<p class="first">This is first paragraph that uses the .first CSS code.</p>
<p>This class makes <span class="bigorange">this text big and orange</span> .</p>
</body>
</html>

From the example, we can see that the first class will make the paragraph blue and the second will be red.

Practice A:

  1. In your practice folder open in Notepad your MyStyles.css.
  2. Add three new classes, with at least two declarations each.
  3. Then open your ExternalStyles.html page and add your new classes as attributes to various tags.

For more info about classes check out this page.

CSS IDs

Similar to classes, CSS also has something called an ID. IDs are defined as a unique identifier to an element. IDs are like classes, except that they are used to define a special case for an element. In other words, we create IDs to be used for something and only ONCE. IDs are used in the selector part of the CSS code by adding a # symbol and then a name of your ID.

IDs are useful in when creating differnt parts of the webpage. For example, how the header looks, the navigational bar, the logo is display, the midsection of the page, and the footer. (We will learn how to position those elements later.) See how an ID is used in Example 2 below.

Example 2a – The CSS Code 
/* This is my Purple Bar ID */
#purplebar
{
color:white;
background-color:purple;
font-family: "Courier New" monospace;
text-transform:uppercase;
}

p
{
color:orange;
}
Example 2b – The HTML Code 
<html>
<body>
<h1>My New Website </h1>
<p>This is my first normal paragraph</p>
<p id="purplebar">This is my second paragraph. It is using the purplebar id.</p>
<p>This is my other normal paragraph</p>
</body>
</html>

Classes vs. IDs

Both Classes and IDs seem similar, but they have different purposes. IDs are unique whereas classes can be used many times. For more info on the differences in them check out this website.

The example shows how the ID called “purplebar” can be used in the code. Remember IDs are unique and should only be used once. If you need to use it more than once then you should change the ID into a class instead.

Practice B:

  1. Using the same files from Practice A add one new class (to the CSS).
  2. Then and add two span tags (in your HTML) using that new class.
  3. Then make two IDs (in your CSS file) each changing the font size, color, and font family.
  4. Then correctly add both of IDs in your HTML code. (Remember to only use each ID once!)