part0017

I n the previous chapter, you learnt about some interesting techniques for selecting HTML elements using the standard CSS syntax. CSS provides a lot of possibilities when it comes to selecting and styling HTML elements, all we need is to get to know about these unique selectors and how they work.

This chapter goes in depth on CSS selectors by introducing you to other new CSS selectors known as class and ID attribute selectors. The class attribute allows you to assign a unique attribute value to one or more HTML elements in order to target and style them in a unique way within your CSS. To make this point comprehensive, we are going to work with a simple example before we try some other interesting things that we can do with the class selector.

Create a new file and save it as more_selectors.html inside your project folder. Also take note of the underscore “_” between the filename. Recall that using spaces on HTML file names is considered a bad practice.

If you have been using the same project folder name created in chapter four of this book, then your project folder name should also be "dixre ". Figure 12.0 shows our new file more_selectors.html with three <h1> tags and three <p> tags added to it.

A lot had been added to the more_selector.html file. But looking at what we have in Figure 12.0, you will see that we didn't really add anything too complex to the file. You are encouraged to create three different <h1> tags each having its paragraph tag below it. As earlier stated, you can write whatever you feel like writing in between the tags.

These HTML elements will be styled using a class attribute value as the CSS selector. After adding the three <h1> tags, with the paragraphs just like what we have in Figure 12.0, go ahead and add a class attribute to the first and last <h1> tags with a value of “special-effect”. Figure 12.1 highlights the new class attribute added to the first and last <h1> tags.

NOTE: Any value e.g. header1, title_1 or title-one can be assigned as value to the class attribute. The value assigned to a class attribute is what will be used as a selector to style any of the HTML elements that contains that value. Additionally, just like the rules we observed for naming files, try to keep attribute values as short, precise and connected as possible.

Observe that we did not add any class attribute to the <h1> tag in the middle. The reason is because we can decide to use the class attribute on any element of our choice depending on how we want to design our webpage.

From the two class attributes that we just added, we applied the same value to each of them, which is “special-effect”. This implies that any CSS rule we apply to that selector (which we will be doing shortly), will automatically reflect on the elements that have a class attribute with that same value assigned to them. In this case, the value of the class attribute will serve as our new selector rather than the regular tag name that we usually use for selecting elements.

Let's try to style our <h1> tags using the class selectors to get a better idea on how it works. An embedded style-sheet will be used to demonstrate how class selectors work. Figure 12.2 shows the new CSS codes that will be used to style the <h1> tags.

Figure 12.3 shows how the page will look like after adding the new CSS rules.

By carefully looking at the CSS rules that we just added within the <style> tag, you will observe that the same class attribute value “special-effect” used within the two <h1> elements was re-used as a selector name within the embedded style-sheet. That is why we got the same effect on the first and last <h1> tags. There are only two CSS properties within the embedded style-sheet that was added to the “special-effect” class selector. The first is the “color” property which changes the text color of any element we are styling. The other property added is the background color property, which changes the background color of an element. You will get to understand more about how these properties work as you frequently use them.

NOTE : When using class selectors, avoid adding any space between the dot and the class name within your style-sheet, as this will cause the CSS rules not to apply.

Another selector that you need to know about is the “ID” selector. The "ID" selector is quite similar to the "class" selector. The differences between both selectors are

1. To style an ID attribute, use the hash "#" sign in front of the attribute value name instead of using the dot "." sign which applies to class attribute values.

2. The ID attribute selector is a unique selector. Unlike the class attribute selector, you cannot assign the same ID attribute value to more than one element in the same file just like we use "special-effect" to style multiple <h1> tags in more_selectors.html file.

This means that, anytime we intend to use the “ID” selector, we must have it in the back of our minds that whatever value that is assigned to the “ID” attribute, should not be assigned to another “ID” attribute in the same HTML file. The “ID” attribute value should always be unique within every file that you create. We are going to try to use the ID attribute within our selector.html file to see how it works.

Within the selector.html file, we are going to add a new tag which we will be assigning the “ID“ attribute to, and then apply some styling to it to see how it works. The example that we are going to be working on will give us a basic idea on how to use the “ID” attribute within our HTML files. Figure 12.4 highlights the changes made to the selector.html file.

There are three things that you need to observe here before you apply the new changes that we have in Figure 12.4. You will observe that after the opening <body> tag, we wrapped all the <h1> tags and <p> tags in between the new opening and closing <div></div> tags added to our HTML file. The closing </div> tag is placed before the closing </body> tag.

The <div> tag is also known as a container tag in HTML. What it simply does is allow you to wrap multiple HTML elements within a single tag after which you will be able to move those sets of elements to any position that suits you on your web page. More on this in a later chapter.

As we progress, you will learn about the various ways in which the <div> tag will play a major role in setting up the layout of your web pages. Figure 12.5 highlights the new “ID” selector we just added together with some CSS rules applied to it.

You can go ahead and add the new styling highlighted in Figure 12.5. After adding the new CSS rules, try to refresh or open your more_selector.html file in any web browser of your choice.

Our web page looks quite different from what we previously had. Also observe that the tags wrapped within the opening and closing <div></div> tags have taken the effect of the new styling that we applied to the “ID” selector with the value of “page”. We used the background color property with a value of orange and also used the width property to assign a value of “960px” to our “ID” selector with the value of “page“. In a chapter ahead, you will get to understand how we came about this.

In this chapter, we were able to use some new HTML attributes such as the “Class” attribute and the “ID” attribute. We also got to see the differences between both attributes and how they should be applied within HTML elements. The next chapter goes a step further on what we have done so far, it also covers some new HTML tags and some interesting CSS properties that we can use to improve our web pages.