CSS Types: Tags, Classes, IDs

WordPress is a great tool for setting up websites. One of its strong points is not having to know code. But, I have found it is incredibly useful to know something about CSS. For every WordPress site I’ve done, I’ve had to tweak the CSS code at least. In this post, we’ll look at the different CSS types.

If you’ve done anything with CSS you have come across IDs, classes, tags, and compounds. These are types of CSS rules.

Let’s cover each one.

Tags

A CSS tag type is used when we are redefining an HTML tag. For example,

h1 {
   font-size: 24px;
   margin: 12px 0 12px 0;
}

We want the h1 headings to be at 24px with a top and bottom margin of 12px. We can use a CSS tag style for redefining almost any html tag. Some of the more common ones are body, paragraph <p>, heading tags<h1>..<h6>, and links <a>.

Classes and IDs

Classes (and IDs) take CSS to another level. It’s great to be able to redefine html tags, but classes and IDs let us create our own tags. The difference between classes and IDs is that one is used only once on a page (IDs) and the other can be used multiple times (classes).

Classes

Let’s say I want to emphasize certain text by using a red color and a bold font. And, I want to  emphasize text several times on a page. I would set up a class as follows:

.redbold {
   color: red;
   font-weight: bold;
}

Classes always begin with a period. When I want to use this class on the page it would look like this:

<p> This is text on a page. <span class="redbold">And this is in red.</span></p>

Another use of classes that I’ve done regularly is creating boxes on the right side. I set up a class to create the box and then use that as many times as needed on the web page. The class would include height and width attributes. See posts below for more info.

IDs

IDs are very similar to classes except that they are used only once on a page (theoretically) and they always begin with the # sign.

For example

#container {
   width: 960px;
}

To use the above ID on a web page I would add the id to a div tag:

<div id="container">
all the information inside the container goes here....including text and html tags
</div>

Bonus: Compounds

Compounds are a combination of classes and IDs. For example, let’s say I want the H1 tag to be red when it’s used in a right side bar, but not in the main content area.

After setting up an ID for the right side bar:

#rightsidebar {
    width: 250px;
    float: right;
}

I can then add another CSS rule, a compound, that looks like this;

#rightsidebar h1 {
     color: red;
}

Now if I use the h1 tag any place inside the <div id=”rightsidebar”> code, it will be a red heading.

This is a very simplistic example, but it gives you an idea how you can specify formatting options within sections of your webpage by using Compound CSS rules. Very powerful.

What questions or helpful comments do you have? What has helped you learn the CSS types?

 

2 thoughts on “CSS Types: Tags, Classes, IDs”

Leave a Comment

Your email address will not be published. Required fields are marked *

close

Get more how-to's and tutorials!

Join 100s of Creative Entrepreneurs who already share their work online using our training materials.

Sign up below for our newsletter

Privacy Policy: We hate SPAM and promise to keep your email address safe. You may unsubscribe at any time.