Build Your Own Business Website header image

CSS Selectors – The Link Between Boxes and Styles

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some protected content!

Watch the opening clip of this video to preview it,
the full video is available to free and paid members.

The next customization that we are going to make in the Thesis 2.3 templates requires CSS. So before we go on to create a 2 column header I want to make sure that you are very clear about the relationship between the CSS rules that we are writing and these boxes.

These boxes all have the opportunity of having IDs and Classes. For example, on this template we’ve got a class of post box, inside that we’ve got a class of headline area. Inside of that we’ve got a class of post content and post excerpt.

We have this ability to add classes and then target those with a style. I could come along here and add the class “howdy” to the post box. Save it. Come back over and flush the cache and reload the page. Now when we inspect element you can see we’ve added the class of howdy to the post box. That is the connection.

Add a Class to the Standard HTML Container

Now I can use that selector to customize something in the post box. You don’t necessarily need to add your own selector because most of these have their own selectors automatically added, like post box and headline for the heading.

But when you add your own containers they often don’t have a class. The standard HTML container does not have a built in class so you’re always going to have to add a class name or an ID so that you have a way to reference that element with a style.

How to Use IDs and Classes

For a beginner the thing to know about this is that IDs should only be used once in a template.

Use an ID Only Once per Template

So if you had ID header like Chris has here, you should never put anything else in this template with an ID of header. If you wanted it to have header in it you’d have to say headersomething to make it a different ID because you should never have more than one.

Use IDs Sparingly

Secondly you should IDs sparingly. I have seen people who have used IDs and classes for everything they did and that is a recipe for writing CSS very difficult. Really I only use IDs for big structural HTML elements or for something that is very unique and needs to stay very unique.

Chris: If it weren’t for WordPress’ automatic output in some cases I would actually never use IDs in a document with one exception. Whenever you are using javascript there are quite a few native javascript functions that it’s easy to target elements by ID. It’s very precise to do so. If you always follow the convention of a particular ID per page. So if you are using javascript I find IDs handy but outside that I don’t use them.

And as far as classes and ID goes, your goal is really to define the fewest number of those possible to get your layout done and to target what you need to with CSS.

Rick: Although really, you shouldn’t have an HTML container without a class.

Chris: Right, absolutely not.

Use IDs for Menu Links on Same Page

Rick: Everything has to has at least a class because it doesn’t have a rational for being if it doesn’t have one. The other reason for using an ID is to have a menu with links to places on the same page. Then your href can be #whatever and you click on it and it will take you to the link down the page.

Chris: Yes. Great point. I actually use that a lot within my content to make sections of content linkable. We do that a lot in our documentation for Thesis. That’s a great point, IDs for actual identification like linking and or javascript.

Rick: So you have to bear that in mind if you are using it for linking inside the post editor then you don’t want to use IDs that are already being used elsewhere on the template.

Chris: Well, that’s a great point so to combat that on DIY themes I use the following convention. ID=section dash and I name the section and that way I’ll just never use something called section dash in my CSS and that way I know its a used up name space.

Use a Class Name Multiple Times in a Template

Rick: You can have the same class over and over again in a template. So you can feel free to use the same class name and therefore reduce the amount of code you have to write as long as the rules for that class name are the rules you wanted to use on all those elements.

Rules to Follow When Creating ID and Class Names

You’ll see examples of that here in just a minute. But if you are writing your own IDs and Class Names then you want to follow these rules.

  • Use all lowercase letters
  • Name must begin with a letter
  • Use of numbers is okay
  • Use of underscores and dashes is okay
  • Use no special characters (except underscores and dashes)
  • Avoid WordPress generated class names (unless borrowing the style)

The other thing to say about this is that you ought to make the name reasonably descriptive. It doesn’t have to be lengthy but it helps you read your own code. For example, giving a column wrapper a class of columns or column wrapper rather than say q. You can use a class a q but because it’s not descriptive it makes it difficult for you to go back and then read your own code.

Then you should also avoid WordPress generated class names. And if you come back over here to my Website and go to Resources. Under Thesis 2 there is this “Download the WordPress Generated Class Names Cheatsheet”.

This has all of the automatically generated WordPress class names in it. That will help you avoid using those names. If you use those names you run the risk of making everything funky. Unless of course you want to borrow the styles from those name.

For example, one place where using a WordPress generated class name makes sense is for align left or align right or align none. Those are automatically generated class names that have rules that you may want to use for an element and you can just add that class name on. But otherwise avoid using them.

Create a One (Rule) to Many (Classes) Relationship

The whole point of this is to have a one to many relationship. So that you can have one set of rules that applies to many, many places on your website. So that when you change that rule it changes it everywhere. So if you have a rule for every HTML element on your site. Then you have a one to one relationship of elements to rules and it defeats the purpose. What you want is classes and rules that are repeatable.

Next up we are going to see examples of what I’ve been talking about here. We are going to start by creating a 2 column header.

0 Comments… add one
0 comments… add one

Leave a Comment