Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Types of CSS Selectors

  • View the selector-types.html page in the course files
  • We are going to take a look at the 3 main selector types in CSS
  • You will need to understand the differences between these in order to create styles for your pages
  • Each type is colored differently within the HTML page
  • The explanation for each selector is on this page, and you can move into code view to view the rules for each type of selector

Types of CSS Selectors

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Three Main Selector Types 0:16
    • HTML Tag Selector Type
    • Class Selector Type
    • ID Selector Type
  • Selector Rules and Examples 7:17
    • HTML Tag Selector Example
    • Class Selector Example
    • ID Selector Example

Transcription: Types of CSS Selectors

We are now going to take a look at the three main selector types in CSS.0000

There are more than just three, but I think you will find yourself using these three most of the time; the others have very specific reasons for using them.0006

Let's take a look at the selector types so we can figure out what the difference is between them and talk about when you might use one over the other.0016

What we have here are the three main types of selectors in CSS: and the three selectors are HTML tags (and notice, that is more for formatting--any HTML tag--you can take whatever the HTML properties are and change them, and you can add additional properties in CSS to those tags)...0027

I can take a basic Header 1 tag that ends up huge and black and has lots of space, and I can remove the space or control the space; I can change the color of that particular text so it's not black.0052

I can also adjust the size of the font and do quite a few other things using CSS; so, it comes in very handy in styling our web pages.0069

That is an HTML tag; and what happens with an HTML tag is: that type of selector immediately changes.0079

In other words, when I create an HTML tag selector (and there is an example one over here in our CSS Styles panel) or the Header 1 (I'll close up by double-clicking my Files panel to make a little more space), you can see, I do have a style rule over here.0089

And there are four different properties with values assigned to them for my Header 1; as long as I have a style rule on the page (or that the browser can access), every H1 on the page would immediately turn to this red color, Palatino Linotype, or whatever other properties I have assigned.0108

Now, you wouldn't normally have extra Header 1's on the page if you are in XHTML, but the new and upcoming HTML5 rules do allow you to put more than one H1 on a page, so you may want to end up doing that in the future.0132

That is an HTML tag; any tag can be formatted using CSS--it can be positioned, as well.0151

Now, the other thing you have available is a class; and a class is a bit strange--and think of it this way: if an HTML tag cannot do what you need, that is when you use a class; classes are also used for formatting.0160

Now, you will see them used for positioning at times; but generally speaking, if you keep your classes to formatting, you will have less conflicts within your CSS code.0179

So, you use that when an HTML tag can't do what you want; you also name that class...and please name it according to its purpose!0191

Don't name it according to how it looks at the time, because those looks can change over time, but the purpose for adding the class never changes; so you will give it a name (there can be no spaces in the names).0204

And you can use a class as many times as you want on the page.0219

It is a two-step process (it's a little bit different): first you create the class, but unlike an HTML tag rule, it doesn't apply immediately.0224

As soon as you have done step 1, nothing happens on your page; and you will think you did something wrong, and that is not at all the case.0236

What you have to do is tell the browser where to apply that new class you created, because there is no tag on the page to instantly apply it to; you decide where it can be applied.0245

And you can do it for a huge chunk of text, or you can do it for a single character, or anything in between; and classes can be applied to non-text items, also.0257

I mentioned the word "text," and I don't want you to think it's a text-only feature.0270

Now, the last type of selector is an ID; and these are usually used for positioning elements: if I want to position on a page, I will use an ID.0275

And here is our class within our styles, and here is our ID: notice, they both begin with a different character; so, if you open up a style sheet that somebody else created, and it has something such as this without a dot or a pound, you know it's a tag.0289

That will be an HTML tag; if it has a dot in front of it, it is a class--all classes have a dot to start--that is what distinguishes them; and for ID's, they all start with a pound sign.0310

If you open up a page, and there are styles somebody else created, it is still pretty easy to see which is which--which are tags, classes, or ID's.0327

Now, an ID is normally used to name page content; and if you think of it as an ID--it's a way to identify content on the page to the browser, so that the browser understands that the properties you are assigning apply to that specific piece of the page.0339

You can name it according to its area on the page or the piece of content you want--why do you have that piece of content?--and name your ID accordingly.0360

An example here is listItems: that is my ID, and since this is a numbered list, it is something that is a list item, and so that is why it was named that way.0373

Now, any HTML tag can have a class assigned to it and can have an ID at the same time; so it's possible to add classes and ID's to the same tag.0389

So, you could have a rule for each one of these types of selectors, even within the same tag; so don't feel like they are exclusive.0403

The one difference is: an ID can only be used once on a page--every ID has to be unique, and that is because the browser--if you name two pieces of the page the same, the browser doesn't understand what you want to do, and it is up to the browser what happens if that is the case; you will get some interesting results.0413

Let's take a look at the rules for these different types of selectors.0437

I do have this available in Code View on this page, but I am going to show it to you a little bit differently; so, let's turn out to this example, and we'll take a look at the actual code.0442

What we have is an example of a tag, a class, and an ID type selector; so, here is my HTML selector example.0458

Notice, it is just a tag--there is nothing in front of it: there is no dot; there is no pound; there are no extra characters at all.0471

And I have my starting brackets here and ending brackets; so everything up here is the HTML tag.0480

Below it, we have a class selector; now, if you notice, this is what is in front of that curly bracket; so, whatever goes in front of the curly bracket in a CSS rule is the selector.0489

The selector is the pieces that I am underlining; so this is the selector for the last one; and you can see, this one starts with a dot right here; this one starts with a pound sign right there; so you can tell the difference between them very easily in your code.0505

The properties and values piece we don't really care about (at least, not at this point): those have been assigned, but I just want you to focus on the selector piece and how you can distinguish between these different types of selectors.0524

This one is my ID; this one is my class; and this one is my tag.0540

Feel free to look these over so you can distinguish the difference between them.0549

Now, classes and ID's I get to name (or you, or whoever is creating the rule); but the tag selectors--that is a matter of what are the tags in your page that you want to change, using CSS.0554

Those are the three main types of CSS selectors; you will see them used over and over again within CSS rules; and you can start to combine these, as well.0570

But for now, we have looked at a tag, a class, and an ID-type selector in CSS.0583