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>

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

#rightsidebar h1 {
     color: red;
}