There are lots of selectors in CSS. In this post we’ll look at three: element, id, and class.
If you remember from our first post in this series, the general rule of CSS is that an HTML element is selected using a selector. You can then change a property of the selected element by giving the property a value.
In the above example code, we changed all <h1> tags to have a background color of red. For this post, we’ll build on that knowledge to make a simple to-do list.
If you’ve been following along then you know this first part. Create a blank HTML file and save it with whatever filename you like. I named mine todolist.html. Remember, it must have the .html extension! Create your blank HTML template and in the title tag give it a name. I named mine ‘To Do List”.
If you want, you can give your page an <h1> heading. Being a forgetful old geek, I gave mine a heading of “To Do List”. Our page is obviously going to need a list of some sort. An unordered list seems appropriate.
Our to-do list needs things for us to actually do. We’ll make a short list containing 3 items.
Wouldn’t it be nice if we could check completed tasks off the list? We can do that by adding checkboxes. If you recall, we can add those checkboxes with an <input> tag.
Now we’re able to “check” of completed tasks. We now have the basic structure of our to do list. But before we start with the CSS we’re going to have to tell the HTML file the name and location of our style sheet. We’re going to do that in the head section with a <link> tag. If you forgot how to do that, check out this post. I will be naming my CSS file “todo.css”. It doesn’t exist yet, so we’ll have to make it.
Start a new file named “todo.css” and save it. Now let’s see if everything is linked right. We can do that by giving our page a background color, at least temporarily. Lets give it a background color of purple. It’s going to be ugly, but we can change it later. We just want to see if everything is right so far.
We now have the HTML file and CSS file linked correctly. What we’ve also demonstrated using an element selector. The HTML element selected is the <body> tag. There is only one <body> tag in a page. But if there were more, the background would be purple. To show this. instead of making the page background purple let’s make the background of our <li> tags purple.
Now ALL of our <li> tags have a purple background. When you use an element selector, ALL of the HTML elements are styled.
What if I just wanted to style one of the <li> tags? What if I needed to clean the kitchen first before I fixed supper? We can give that specific <li> an id attribute. (For a refresher on id’s see this post.)
Remember, we can have as many id attributes on a page as we need, but each id needs its own unique name. I gave the last <li> tag an id of “dofirst”. That is the only id named “dofirst” allowed on the page.
Let’s make the “clean the kitchen” task stand out to remind me to do that one first. We’ll give it a red background with some white text to make it easy to read. When we use an id selector, we put a hash tag (#) before the id name.
What if we wanted to select more than one HTML tag? We can do that with a class selector. First, we’ll give our other <li> tags in the HTML file a class with a name of “donext”. Although in this example the tags are the same (<li>), they don’t have to be. You can, and most likely will, have different HTML tags in the same class.
Next, we make a new CSS rule using the class name, donext. When writing class names, we precede it with a “.”. We’ll give every tag with this class name (donext) a yellow background.
When you want to style all the of a certain tag, such as all the <h1> tags, you use an element selector. In this case h1.
When you want to style a specific tag, you give that tag an id. Then you precede the id name with a hash tag like this #id-name.
When you want to select a group of tags, you give all the tags the same class and precede the name of class in the CSS with a “.” like this .class-name.
In the next post, we’ll take a look at some other types of selectors.