RSS
CSS Videos
By Ashton Sanders

CSS Properties

CSS Selectors Part 1

StupidMehOkayGreatAwesome!
(124 votes, avg: 4.28/5)
Loading ... Loading ...

Video Transcript:

Hi this is Ashton Sanders with CSS Videos.com and this CSS Video Tutorial is the first video about CSS Selectors.

CSS Selectors add an incredible amount of flexibility and functionality to what you can style with Cascading Style Sheets. So far we have briefly defined what the CSS Selector does in the CSS Syntax video, and that is:

  • Selector: is the hook used to choose what part(s) of your HTML to apply the CSS to.

I have a feeling that won’t even make sense to most beginners. If it does right now, excellent; if it doesn’t you’ll soon understand in these examples. In this video I’ll give you a better understanding of how the Selector works and three types of hooks you can select with it. There are many different ways to “select” HTML elements, but I will try to cover the necessary basics.

I will note that CSS can be applied to many more languages other than just plain HTML, but since it’s the most common, lets start with some example HTML:

<h1>CSS Selectors</h1>

Here we have a simple <h1> tag around the text of “CSS Selectors.” Now we are going to write our CSS to select this <h1> tag and make it red:

h1  { color: red; }

That’s pretty simple and straightforward. The selector is the h1 and it selects all <h1> tags in your HTML document to make it red.

But we have one little problem, and that is that this CSS will make all <h1> tags red. If you have two <h1> tags on your website and you want one to be red and another to be blue, there are a couple things you can do. (Boo yea, that rhymes.) We’re going to start with assigning Classes and IDs to the HTML <h1> tags.

CSS Classes


Here is the HTML of adding a class of “hdr” to one <h1> tag:

<h1 class=”hdr”>CSS Selectors</h1>

As you can see, the class is just a simple HTML attribute we added to the H1 tag. The same class attribute of “hdr” can be used as many times as you want on the same HTML page. For CSS Selectors we use a period (.) to represent a class.

h1.hdr {color:red;}

This code selects all <h1> tags with the class=”hdr” attribute and makes it red. You can also write the class without listing the HTML element like this:

.hdr {color:red;}

This would select all HTML elements with the class=”hdr” attribute and make it red. This is useful if you want to apply the same styles to different HTML tags. You just add the class=”hdr” attribute to the element and it will become red. It doesn’t matter if it’s a <h1> tag, <p> (paragraph) tag, or <blockquote>.

I will also mention that the HTML attribute of “class” allows multiple values separated by spaces. So you can have an <h1> tag with the class of “hdr” and “main” at the same time like this:

<h1 class=”hdr main”>CSS Selectors</h1>

You can apply CSS to this element using either class. You can use any of these three lines to make the color of this <h1> tag red.

.hdr {color:red;}
.main {color:red;}
h1.main {color:red;}

That pretty much wraps up classes. Next on the list is CSS ID’s:

CSS IDs

Here is the HTML code for adding an ID of “mainhdr” to an <h1> tag:

<h1 id=”mainhdr”>CSS Selectors</h1>

As you can see this is just like the class attribute. The difference between the class and the ID is that the ID is only supposed to be used once on an HTML page. In CSS we use a hash mark (#) to represent an ID.

h1#mainhdr {color:red;}

This would select the <h1> with the ID of mainhdr and make it red. Just like the class selector, you can write the ID selector without the HTML element like this:

#mainhdr {color:red;}

This code selects any HTML element with the ID of “mainhdr” and makes it red.

Is that it? Heck no, but that’s all I can fit into this video. The next video will be CSS Selectors Part 2 and will cover applying the same CSS to multiple elements and using the hierarchy of your HTML document to specify what elements are selected.

Thanks for watching the video I hope you enjoyed it.

This entry was posted by Ashton Sanders on Friday, May 22nd, 2009 at 6:20 pm and is filed under CSS Basics. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

19 Responses to “CSS Selectors Part 1”

  1. lindsay says:

    i want to see some visuals! do u have any screen capture software? we need to get this site up with the times!!! yay css!

    • Ashton Sanders says:

      Haha, Thanks Lindsay. I do have screen capture software, and I’ll be using it a lot when I get in to demonstrating the CSS properties. For the CSS Basics, these image slides seem to demonstrate the ideas pretty well, no?

      • Kyle says:

        as a true noob to the html/css world I can say with some authority, yes, I think the slides demonstrate the ideas perfectly imo. I would like to see some real world applications but I have to admit that it’s probably best to wait and just accept that Master Ashton knows what’s best ;)

  2. Jill says:

    Yet another css tutorial that introduces css words that the learner is supposed to already know! I’ve not come across one online tutorial that explains what these mean without using the words in their definition of the words. I have a brief idea of what class & id means but surely for beginners, shouldn’t you have defined what they mean before going on to how to use them?

    • Ashton Sanders says:

      Hi Jill,

      I’m sorry that wasn’t clear enough for you. I admit: I tried to define them by using examples as I figured that would be the easiest way to explain them:

      Here is the HTML of adding a class of “hdr” to one <h1> tag:

      <h1 class=”hdr”>CSS Selectors</h1>

      As you can see, the class is just a simple HTML attribute we added to the H1 tag.

  3. Luke says:

    Hi Ashton,

    Firstly, great tutorials, best out there I can find.

    So what about Pseudo-Selectors, they’re pretty important, no?

    Can’t wait until you get up to floating, positioning, this thing about specificity, and descrbing the different types of elements e.g. block elements (display property). These are things in CSS that confuse me :/

    Thanks again!

  4. Pepe Marino says:

    Short and sweet. Information in general should be delivered like this: no ego added, clearly stated, and to the point. This way nothing is lost with semantics.

    Very nice videos.

    Thanks.

  5. Johnny says:

    Great video…could you discuss CSS on Mozilla as well…. because as long as i know mozilla has some different css syntax.

  6. Mark Strodl says:

    God Bless you Brother, GREAT !!
    I am a graphic Designer, Left brained who needs to see it !

  7. Karim says:

    HI Ashton,

    The audio in this video is not as clear (lower volume) as your other videos. May I suggest that you use a free screen capture called Screenr to capture your video? Screenr from Articulate is an online screen capture program. You can capture the screen recording up to 5 min maximum. The video can viewed in HD as well. Here is my example of screen capture using Screenr. I captured my Powerpoint presentation (with narration) and all the animation with Screenr. You can then embed it on your website. Link: http://www.screenr.com/8Ez

  8. Jane says:

    great presentation of the tutorial it’s simple yet precise, actually i’m using this in my class. They watch the video then i start my discussion. Hope you’ll have more tutorial about this. =)

  9. Grover Brichetto says:

    you really know your things. always keep up the beneficial stuff!

  10. Site Content Optimization For Dummies says:

    Site Content Optimization For Dummies…

    [...]CSS Selectors Part 1 | CSS Video Tutorials[...]…

  11. Landon Flowers says:

    Yet another css tutorial that introduces css words that the learner is supposed to already know! I’ve not come across one online tutorial that explains what these mean without using the words in their definition of the words. I have a brief idea of what class & id means but surely for beginners, shouldn’t you have defined what they mean before going on to how to use them?

    • Ashton Sanders says:

      Thanks for the comment Landon. Yes, I’ve noticed that problem in other websites as well. That’s why I have a definitions tab on the top right of the page: http://cssvideos.com/css-definitions/ Also, Class and ID are defined in the selector videos.

      Let me know if they aren’t explained well enough for you.

      Thanks,
      Ashton

  12. evan1138 says:

    After thinking for a while I still don’t understand regarding ID’s what is meant by “once” in:

    “As you can see this is just like the class attribute. The difference between the class and the ID is that the ID is only supposed to be used once on an HTML page”

    Is ID used only once? Or is it that each ID value should be used just once? What do ID’s do that Classes don’t. I understand this will become clear later, but a clue right here would be de-confusing for me.

  13. Daniele says:

    Hi Ashton,
    Great stuff! Just to let you know that the rating system is giving warning:

    Warning: Creating default object from empty value in /homepages/29/d199346440/htdocs/cssvideos/wp-content/plugins/wp-postratings/wp-postratings.php on line 189

    • Ashton Sanders says:

      Thanks Daniele. I’ve updated the plugins, so we should be good now.

  14. Cory says:

    These videos are fantastic. They’ve helped me a great deal. God bless you!

    -CH

Leave a Reply

 
 
.love { css: awesome }