Hi, I'm Dr. B and welcome to my digital composing instructional video series.
In this tutorial, I describe how to create and use unique CSS selectors. Specifically I will be discussing ID's and classes.
In addition to overriding all of the default formatting rules for each element in an HTML document, CSS also provides two options that will allow you to target specific HTML elements by using the ID or class attributes.
CSS allows you to do this by creating your own unique selector names.
We can then use those unique selector names to specifically target HTML elements throughout an HTML document, as I will illustrate in the following examples
Your first option is to use what are known as ID selectors, which target HTML elements that have had an ID attribute added to them.
One thing to note, however, is that ID's can only be used once inside your HTML documents and they require you to use a hash character before the selector name in your CSS stylesheet.
As you can see here, I have two heading tags that I want to format, however, I only want to format the first one using the ID attribute.
To do so, I first need to build my style declarations.
In this case, I'm going to add the hash character followed by the name red. Notice there's no space between the hash and the name. The hash simply means ID.
As before, I then add the property that I want to format, in this case color, add my colon, add my value, red here, and then drop in my semicolon at the end.
Notice that when I save my stylesheet nothing happens to the HTML code.
In order to use the style declaration I just built, I have to go in and tell the HTML document which of the heading tags I want to be formatted using ID red.
As you can see here, what I do, then, is I go in and I add the attribute ID equals, make sure to include my double quotes, and I put the name inside those double quotes. In this case red.
Make sure t0 notice here that when we add the name to the ID attribute we do not include the hash character, instead we just put the name.
Also notice that when we use this approach the only HTML element that will pick up my formatting rule is the element that we specifically assign the ID to.
The other heading tag here is not impacted in any way by the rule I just created.
It's important to note that ID's should only be used once per HTML document. If I wanted to format the other heading tag, I would then have to create a new ID and then add it to the other h1 tag using an attribute.
Your other option when it comes to using unique selectors is to use what is known as class selectors. In this case, you target specific HTML elements using the class attribute.
Unlike IDs, class selectors can be used multiple times within the same HTML document.
To do so, we simply add the class attribute to every HTML element that we want to format using the rules we created for that class selector.
Like ID's, class selectors require something very specific to be added to our selector names in our style sheets.
In this case, we need to make sure we put a period before our selector name. The period, then, stands for class.
As you can see in this example, I have two paragraph tags that I want to add some formatting to.
I've also added some basic style declarations to paragraph tags using the p selector in my CSS stylesheet.
To change the formatting of my second paragraph tag, then, what I want to do is I want to add a selector called yellow and I wanna use a class selector.
In this case, I start with p, I drop a period, and I add the name yellow.
By adding the p first, basically what I'm saying is that this class will only impact paragraph tags that the class name is added to using the class attribute.
I then add my formatting rules. In this case, I add color, and I give it a value of yellow.
Then I go into my HTML, I find the paragraph tag that I want to be formatted yellow and I add the attribute class equals, make sure to include my double quotes, and then put the class name between the double quotes.
Like with ideas, I have to remember to just add the selector name inside the double quotes.
I do not have to add the p and the period in this case.
It is important to note here that when using class selectors whenever you add a class to an HTML element that element will pick up the formatting rules of the class but will also pick up any other formatting rules you've added to the element.
In this case, my paragraph tag is picking up both the formatting rules that are added to the p and the additional formatting rules that I added to the class selector yellow.
As I said before, we can use class selectors as many times as we want to inside the same HTML document and we can use that same selector to target different HTML elements.
So, in this case I'm, targeting a heading and a paragraph tag in the same HTML document. In this case, I'm using the class selector green inside both of my heading and paragraph tag.
One additional advantage of class selectors is that you can add multiple selectors to the same HTML element.
What you would do is add each class selector name to the style attribute of the HTML element you are trying to target.
In this case, I want my paragraph tag to be formatted in green and I want it to be bigger than a normal paragraph. So I add both green and bigger inside the class attribute.
When adding multiple selectors to your style attribute, make sure that you separate them by a space. Don't add a period or anything else or the formatting rules for each will not be picked up.
In later tutorials, I'll show you how to implement both methods I discussed in this tutorial in an actual live HTML document.
For now, however, it's important to remember that you can create your own unique identifiers when creating CSS stylesheets.
It's also important to remember that IDs can only be used once inside each HTML document and that IDs require the hash character and classes require the period when you are creating your style definitions inside your style sheet.
That's it that brings us to the end of today's tutorial.
I hope you enjoyed today's tutorial and that you are enjoying building your own digital compositions.
As I always say, thank you for playing along and for trusting in the process.
Dr. B’s instructional video series is brought to you in cooperation with the Bacha Design Group.
For more information about the Bacha Design Group, or to view more tutorials, please visit us online at jeffbacha.com.