CSS Classes and Ids: Web Design Series: CSS Part 15

css classes

CSS Classes and Id’s

We have hit a major milestone in the CSS language, and that is CSS classes and id’s. A class or id gives you the ability to name and specify styles in your own custom CSS rules. This can then be used over and over again throughout your code. One of the greatest things about CSS is that it is reusable. Many web designers create templates for themselves to use over and over in many projects. The more CSS code you write; the less you have to in the future, because of its versatility. While CSS classes and id’s virtually do the same job; they’re meant to be used in two different ways. The purpose of a CSS class is to use it’s styles on multiple types of HTML elements. An id, on the other hand, is meant to be used on unique elements. For example, a header that will be on every one of your pages in your website. When it’s time to choose between a class and an id, an important rule to remember is that an id should be used on something that will never change. It should be unique. A class can be used on many elements. For example, an h1 heading, a paragraph, and an ordered list. Let’s start with a class. We’ll begin by creating a class with a few rules and applying it to a few elements in the example below.

css classes display

css classes code

Before we start discussing our new code, I want to point out that I added a few HTML line break tags(<br />) in both p elements just for the purpose of making the image easier to see on a smaller screen. I won’t include them in the source code. Let’s start with the CSS. We have one rule in our CSS style sheet and the selector for that rule is a class selector. You can identify a class selector by the full stop/aka period(.). The selector name is redText. The name of this class and capitalization is very important. Our class selector “.redText” has a capital T in its name. When our class is used in our HTML code it must match up exactly as it is written in our CSS. Many web designers will use a hyphen instead of capitalizing the first letter of the second word. For example: .red-text. This makes it easier to read and separates the two words. In the above example, I used the first letter of the second word capitalization approach, because I want you to see that there are alternate ways of coding. Ultimately, it will be up to you to decide what works best in your style of coding. The Capital letter of the second word system goes back to my programming experience as that is a very common thing to do. There are a lot of things to take into account when naming a class.

Naming CSS Classes

  1. A class is identified in your CSS code by the period.
  2. You should use full words and not abbreviations in a class name.
  3. Names have to match exactly and should be easy to remember. Examples: .redText or .red-text.
  4. Try to make classes that could apply to multiple elements.
  5. Multiple classes can be added to the same element; so they can do very basic things. I.E. underline text only.
  6. Classes can be used globally with .class-name or specifically like p.class-name
  7. Name your classes with appropriate names that are obvious for what they do.

So, although we have a class name of redText in the above example, we could have named it red-text and that would have been acceptable, as long as the attribute name and value in your HTML code match up exactly. Okay, back to our CSS class of .redText. All that we have this class doing is making the text red and setting the font family to georgia. Now that we have a CSS class rule set up, we apply it to some HTML elements. We use the .redText class three times in the HTML by adding a space, and class=”redText” to the opening tag of the element that we want to apply it to. For example, to apply a class named blue to a <p> element, we would alter the opening p tag like this: <p class=”blue”>. The class name goes inside of double quotes. If we also had a class that just underlined text, adding it to the p tag would look like this: <p class=”blue underline”>. It’s simply a space and another class name inside of the double quotes. You can add as many classes as you want to an element. This is why in most cases classes should do a very specific thing, and then you could use them everywhere.

In the example, we use our class on the h1; the second p element and the third li(list item) in the ordered list. We can use it like this because we created a global CSS class rule, but you can get incredibly specific with where the class is used if you wanted to. This kind of brings us into the CSS id because if you want to apply a custom style to a specific, unique element that will never change; this is where you would use an id instead of a class. Let’s use some of this new information in the example below.

CSS id's code

css id's display

In the final example for this lesson above, we created another CSS class rule named .underline. It is recognized as a class by the period. The only thing we have this class doing is underlining text by using “text-decoration: underline;“. We applied this to our h1 element by adding a space after redText and the class name of underline. Our h1 now has two CSS classes that it’s taking style from. The redText class makes the font red and family type georgia; the underline class simply adds an underline under the text.

We have added a footer in our HTML code and given it an id named “bottom-footer”. This is a good example of where an id would be better used than a class because this footer that would most likely be on every page would never change. It’s unique. There is virtually no difference between the function of a class and an id. Id’s are meant for elements that you don’t plan on changing, but if you used class here instead of id; it would have worked in the exact same way. In the CSS code, we identify an id by using the number symbol (#) followed by the id name for the rule selector: “#bottom-footer“. This CSS id rule does three things. It makes the font size 90 percent of the original default size. Footers usually have smaller text than the rest of the page, so this is a common way to adjust the size of text in a footer. Web Designers often set a default font size in their CSS body rule, and then they increase or decrease the font-size values using percentage throughout the website. This makes it very easy to adjust all font sizes at once by altering the value in the body rule. The other two functions of this CSS id rule is to make the font type arial and give the entire footer a background color of gray.

As you can see, the id rule that we created wouldn’t be very useful to apply to any other element because it does a specific job for a unique element. That’s gonna do it for CSS classes and id’s. We are going to start implementing them into our future lessons, so you will have much more experience with them. As always, Thanks for reading, and I’ll see you next time.

Source Code

<!DOCTYPE html>
<title>CSS CLASS AND ID</title>
color: #ff0000;
font-family: georgia;
text-decoration: underline;
font-size: 90%;
font-family: arial;
background-color: gray;
<h1 class="redText underline">The CSS class(.) and id(#)</h1>
<p>In this lesson we are going to work with CSS classes and id's.
Classes and id's are very powerful tools in CSS.</p>
<p class="redText">A class should be used on multiple types of HTML elements, and
an id should be used on unique elements that you don't plan on changing.</p>
<li>Classes are recognized in a CSS rule by the full stop(.)</li>
<li>Id's are recognized in a CSS rule by the number symbol(#)</li>
<li class="redText">You link your class or id in the HTML code to the CSS rule.</li>
<footer id="bottom-footer">&copy; yourname 2016 All rights reserved.</footer>

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: