CSS Basics

Get the Flash Player to see this player.

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.