Week 08 CSS Selector Types

Hey, everyone. This video, we’re going to start talking about different selectors that are available in CSS, and I’m also going to talk about a few more different types of CSS text properties as a continuation of where I left off in the video that I recorded earlier about different font properties. Now so far in CSS, all of these demonstrations, we’ve just been using what’s called the element selector, where we’re targeting a very specific HTML element just by using its name. You can see several examples of this in my CSS, the body selector, the h1, h2, dt, strong, and paragraph are all examples of an element selector.

But we have other ways that we can target our HTML.

So, we’re going to talk about what’s called a descendant selector. And a descendant selector is going to target elements that are contained within another element. It’s very contextual in that it selects based on its relationship with another element. The way that we indicate that we’re using a descendant selector is by using a space in between each of our selectors. I’m going to close out my preview, and that gives us a lot more space to look at this in detail.

Let’s take a look at the main element inside of our HTML to start us out. I can see that there’s more than one section inside of the main. We have a section for appetizers, and we have a section for entrees, and each section has individual headings, paragraphs, and a description list. So if I wanted to target inside of my main element a paragraph to make it different than the paragraph that might be contained in my header and in my footer, I can use a descendant selector to handle that relationship. So looking at our HTML, what if we wanted to change the color of our new item text?

We can’t just use a strong selector because the strong is also surrounding the words very spicy. Now, since the new item text is inside of a strong element that’s a descendant of a description term element, I can use that to my advantage. To use the descendant selector to target just the strong elements inside of the description term, I’ll enter in description term, a space, then strong.

And that character space between element names, that means that the second element must be contained inside of the first element. So let me open up the pane with the CSS in it just a little bit further.

And I’m also going to preview the HTML, and I’m going to scroll the HTML just a little bit so that we can visually see all of these elements in play. I’m going to remove these commented out lines of code. This was from a previous video. And now I’m going to say I winna find every description term element that’s out there. And with that space, I’m going to say, now look inside that description term and find every strong element.

And when you find that, let’s change it to the color of maroon.

Now the expectation here is that we’re going to only target the two locations that are referring to the new item, and it’s not going to target the item that’s very spicy. So I’ll save my changes. And as you can see, I was able to target only those strong elements inside the description term, and that way we’re not worrying about the one that’s inside of that description definition. Now that’s an example of a descendant selector, but we still have a few more selectors that we can look at.

There’s the id selector. And with an id selector, we can use the id attribute in our style sheet to target very certain elements. We use the pound symbol or the hashtag to indicate what the id is in our style sheet. Quick side note, don’t let your id attribute values start with a number. Let’s scroll up in our HTML, and notice the id attribute value combination that’s inside of our header.

This is uniquely identifying our header element because an id can only be used one time inside of a document. It can’t refer to anything else other than this one particular header. In order for us to style that header, the way that we would write the selector is to start out with that pound sign, also known as the hashtag or the number symbol. But it’s helpful if from now on when you think about this symbol to automatically equate that to id. Those two things are synonymous.

So, we’re writing this selector as if we’re saying where the id of info is concerned, we winna change that to the color teal.

And I’ll save my changes. Did you notice that all of the styles inside of the header for the h1, the paragraph, and the span element also changed? That’s because it’s a text property, and text is going to inherit those values from their parent. Let’s go to the next one.

The next one is called the class selector. And if you remember, a class attribute can be used multiple times. Whereas an id is specifically referring to one element, a class can be put on many different elements. And the way that we’re going to identify a class attribute in our CSS is instead of using the pound symbol or that id symbol, we’re going to use a period. So looking inside of our HTML, there’s several different items that are using the class attribute.

Specifically, I’m going to target the one where it says class is equal to price, and I’m going to change the font family, the style, and the color.

And, again, if I’m using class, I’m going to use a period, and then I’m going to name which class I’m referring to, price. Then I’ll set my styles where the font-family is going to be, let’s say Georgia, and serif. We’ll use the font-style of italic, and we’ll use the color gray. And then I’ll save my changes.

Take a look at our header. There’s a class equals label. We’re going to use that to change the styles of the hour’s information. So, we’ll enter in class label, and we’ll set it to the color black.

What if we wanted to change that warning all the way down at the bottom about being required to warn you about undercooked food?

That sounds like something that would really need to stand out on a website. Let’s change that to a maroon color. I’ll scroll down on my page to find it. And there it is. Where the class is equal to warning, that paragraph we’ll change it to maroon.

So with all of those different ways that we can identify or target selectors, how do we know what to do when there’s a conflict? Well, if you remember to another video, I talked about how CSS has rules that it has to follow in order to determine which style it applies when there’s conflicts.

Well, with these new selectors, we need to look at how they play into the specificity’s ruling. When it comes to how things are going to be applied, the most specific that we can get is going to win. From the most specific to the least specific in order, an id selector is more specific than a class selector, and a class selector is more specific than a descendant or contextual selector, and then finally the last one is the element selector.

Let’s try an experiment. Now, given the code that I’m about to put below this, what color do you think I’m going to change the h1 to? Now, currently the h1 is getting its color where the id is equal to info.

It’s set to the color of teal. But for this, I’m going to comment that out just for now so we can play this game.

All right, so let’s say I have an element selector where the color is set to red, but I also have a descendant selector where if the h1 is inside of the header, it should be the color blue. So which one of these two should win? Well remember from most specific to least specific in order it’s id selector, class selector, descendant selector, element selector where element is the least specific. So because I’m using a descendant selector, this one is more specific or closer to the text, so it’s going to win. So, this color should end up being blue.

I’ll save my changes. And there we have it, the h1 turned blue.

Let’s try another one. This time I’m going to say my h1 should be red. I’m going to use an id selector where the title inside of the h1 should be green, but I’m also going to say find the header and inside of my descendant selector, I want my h1 to be blue.

So will it be red, green, or blue? It should be green, let’s find out. Because we’re using an id, we are as close to that text as possible. There’s nothing more specific that we can do to get to that text content than using the id.

Let’s do one more.

This one’s a little bit different. Now we’re saying inside of our header, find every span element and make the color blue. But we also have one that says where the span class is equal to label, I want the color to be magenta. So which one of these two should win? Well, a class selector is more specific, so it should be magenta, and it is.

If you get stuck, just jot it down and make sure that you have it handy. Those are gonna go from most specific to least specific where it’s id, then class, then it’s contextual or descendant, and then it’s the element selector. All right, I’m gonna take that back out, and I’ll uncomment the original info, and we’ll apply those changes because I wanna talk about just a few more text properties. Starting with text-align. We’re going to center our header and our h2 elements, but we’re gonna do it with just one CSS rule.

We’ll say header, and then I’m gonna use a comma, which is equivalent to saying the word and.

So basically I want my header and my h2, and I want them to text-align in the center Before I save this and show you, I just wanna let you know when it comes to using the text-align property, it’s going to work to align the text inside of a block level element. It won’t work on an inline element because a block level element will span the entire width of its container using the text-align center causes it to have an equal distance on either side of it inside of that container. But because an inline element only takes up the amount of space that the content has, it’s already in the center.

So text-align center on an inline element will not work.

So I’ll go ahead and save my changes. And now look how my header and all of my h2s are centered on my page. I can drag my screen open even further to test this out. So notice that no matter how wide I make my screen, my content is staying directly in the center with an equal amount of distance on either left side or the right side.

It’s text-align center.

But text-align can also take the properties of left, right, and justified where we’re aligning things on the left side, aligning them on the right side, or if we use justify, it’s forcing the content to always end and start at the same space on both the left and the right side. Another really interesting property that we can look at is the line-height property. Let’s add that to our body selector. This is also known as leading.

This is the space between each line of our text.

So I’ll add line-height, and I’m gonna put it at 1.7em. So when I refresh my screen, you’ll see all of my lines will have an equal space in between them of 1.7em. I have one more cool one that I’m gonna show you on this video, and I’m gonna show you the text-shadow property.

Now, this property ends up taking a couple of different values, so let me write this out. We’re going to need an X position, a Y position, a blur, and a color. Now I’m gonna show you what it looks like, but then I’m going to make it really obvious when I make changes so that you can get a feel for exactly what each one of these does. I’m going to add this text-shadow to my h1, but I already have one declaration in my h1.

So I’m going to set this to a new line and start a whole nother declaration.

I’ll start with my text-shadow, and I’m going to use 0.2em for the X position, 0.2 for the Y position, 0.5 for the blur, and the color gray. And when I refresh, you can see that it looks like I have a text shadow on my h1, but how do you know what the X position is, the Y position is, what the color, and the blur are really doing?

Well, let’s make it a little bit more extreme starting with the color. I’m going to change it from gray to red, so it’s really bold so you can see it. Next, I’m going to change the blur so that you can really get a good crisp vision of what this is doing. I’ll change it from 0.5em to a really small number because I don’t want it to be very blurry.

I want it to be nice and sharp and clear. I’ll change it from 0.5 to 0.1em. Now you can really see what’s happening behind that text.

So for the X position and the Y position, let’s go ahead and change the X position first. Now the X position is referring to how far indented or away the position is going to be in relation to its associated letter. So, let’s say we change it from a 0.2em to just 1em. You’re going to see the text shift to the right.

I’ll do the same thing with the Y position, so you can really see it change. I’ll change it from 0.2em to 1em, and you can see that it pushes it way down. So you can control just how much blur there is. And if you’re not really sure what’s happening, take a little bit larger of a number or smaller of a number to make a big swing change so that you can visually see what each thing does and then adjust as you need it to.

I really do wanna have that text sitting just below and just off to one side with a little bit of blur and a much milder color to sort of make it look like that is leaping off the page. So I’m going to set it back to 0.2 X and Y position with a little bit of a 0.5 blur, and I’ll set that color back to gray. In our textbook in chapter 12, there are a lot more text properties out there that you can go through and discover things like text indentation, underlining, using text decoration.

You can use text transformations to make everything uppercase or lowercase or to capitalize the first letter of every word. You can add line spacing or word spacing. All kinds of really cool things out there. So, make sure you’re going through the textbook fully, reading all of chapter 12 and trying out each one of those different types and seeing what they do. So, I’m going to stop this video right here, but if you have any questions on any of this material, please don’t hesitate to ask.

https://ezclix.club/viral.asp?r=605