CSS Properties

Video Transcript:

Hi this is Ashton Sanders with CSS Videos.com and this is the second video about CSS Selectors. In CSS Selectors Part 1, we covered how you can use HTML tags, ID‘s and Classes to select what to apply your CSS to.

In this video we’ll talk about

1. Applying the same CSS to multiple elements.
2. Using HTML’s hierarchy to be more specific about what elements are selected.

Selecting Multiple Elements at Once

To select two separate elements at the same time and apply the same styling to each, normally you’d write it as this:

h1 { color: red;}
h2 { color: red;}

Or you can use a comma to separate the selectors and put them together like this:

h1, h2  { color: red;}

Nope, not very complicated at all. This line of CSS will make all <h1> and <h2> tags red. You can apply the same styles to as many selectors as you want. There’s no limit.

h1, h2, #item, .red   { color: red;}

In this line of CSS, we have applied the same styling to four different selectors. All <h1> tags, <h2> tags, elements with the id=”item” and class=”red”.

CSS Descendant Selector

Of the CSS Basics, I probably use the CSS Descendant Selector the most. This is wher eyou use the hierarchy of your HTML to define which elements get “styled” (as opposed to assigning classes to everything. To quickly define hierarchy, here is some simple HTML:

<body>
<div>
<p>Random Text</p>
</div>
<p>More Text</p>
</body>

We have two paragraphs (<p>) in this HTML. The only difference between them is that one is the “child” of a <div> and the other is not. It can also be said that the <div> is the “parent” of the <p>, just like how the <body> is the “grandparent” of the first paragraph and the  “parent” of the second paragraph. A simpler way to say this is: the <body> is an “ancestor” (parent, grandparent, etc.) of both paragraphs. We can use these relationships in our CSS Selectors.

Let’s use CSS to only change the color of all paragraphs with a div as an ancestor:

div p { color: red;}

Yes, it’s that simple. The space represents ancestory.

body p { color: red;}

This CSS would make both paragraphs red since both paragraphs  are a descendants (child, grandchild, etc.) of the <body> tag.

Note: There are more ways to use your HTML hierarchy in your CSS Selectors (like only direct, siblings, etc.) but as they don’t work in all browsers in use today *cough* IE6 *cough*… I won’t go into them in detail here.

That pretty well summarizes what you  can do with CSS Selectors!

The next video will talk about the three ways of including your Cascading Style Sheets into an HTML document.

Thanks for watching and rating.