All language subtitles for 037 CSS Selectors.en_US

Now in the last lesson we looked at the simplest type of CSS selectors and that is selecting based

on the HTML tags.

Now in this lesson I want to show you the other things that you can use as selectors in order to make

more specific changes to your web site.

So for example we have this image of a piece of bacon.

Now what if I wanted to have another image that was a broccoli and I want to show people how much I

dislike broccoli.

Then I could go to emojipedia and I could search for a broccoli and I found my broccoli.

And this is a really cool web site because it lists all of the emoji graphics from different operating

systems.

So this is Apple's version of a broccoli emoji.

And this is Google's. This is Microsoft. Not sure that this really looks.

This looks more like a tree than a broccoli.

But feel free to go through this list and see what emoji you prefer.

I quite like this one I think it's most realistic.

And then just go ahead and right click and copy the image address and we're going to use that as the source

of our image.

And you can see up here.

This is exactly the same way how I got the image for our bacon and I'm just going to add an alt text

just in case the image doesn't display.

And I'm going to say this is the broccoli-img.

So now if I hit save and I go to my bacon fansite you can see that my broccoli now shows up.

But the curious thing is that my broccoli also has a red background

even though I just put it on screen, I didn’t even have time to look at the styles yet.

So why is that.

Well if we take a look inside style.css you can see that by targeting the image tag,

we’re applying this red background color to every single image inside our web site.

And that might be what you want but in most cases that's not really specific enough.

And in my case what I'd like to do is that I want to have the bacon to have a green background color

to say eat more bacon.

And the broccoli to have a red background color to say broccoli is evil.

So how can I achieve that.

Well I can’t do that just by using tag selectors.

So I have to go a little bit more advanced in my CSS and I have to use class selectors.

So if you head into index.html and after the image tag we're going to add another attribute.

So remember HTML attributes are things like the source or the alt tag etc..

And the one that we want to add now is the class attribute.

Now the class attribute allows us to differentiate all of our different HTML elements.

So for example for this bacon image I'm going to give the class a name of bacon.

And for the broccoli image I'm going to name this class broccoli.

So now what I can do is instead of coloring all the images red so I'm going to go ahead and comment

this out.

So in CSS commenting is a little bit different from HTML in the sense that we have to use a forward slash

a asterisk and then to end the block of comments we use another asterisk and a forward slash.

So everything in between the asterisks will be commented out and won't be considered as code.

So let's give our css files some sections, shall we?

Let's say that the top section are our tag selectors.

And the next section are our class selectors.

So inside this section I'm going to tap into that bacon class in order to only change the styling for

the bacon image and give it a background color of green.

So to target a class rather than a tag the only difference is a full stop or a dot in front of the class.

So my class is called bacon.

So to use it as a selector I just say .bacon and the rest of the CSS rule looks exactly the same.

And I'm going to say that for the bacon class I want the background color to be green.

But for the broccoli class.

Now make sure you don't have any typos because if you misspell the selector, the property or the

value you might not get what you expect.

For example what I've done here because they all need to be spelt exactly the same way as you spelt

it inside

your html code when you gave the class a name.

So for our broccoli image we want the background color to be red.

So now if we hit save then what's going to happen is that different styles will be applied to our two images.

So even though they’re both image html elements, because this one has a class of bacon it's going to have

a background color of green as we specified.

And because this one has a class of broccoli it's going to have a background color of red.

So let's just quickly verify and there we go.

We've got our bacon that's colored in green telling you how healthy it is.

We've got broccoli colored in red telling you how it's probably not edible.

So for things like paragraph elements or image elements or anchor tags then it's very very rare that

you'll want to style them exactly the same way.

So by using the class as the selector you can better differentiate and and make more specific styling

choices for your web site elements.