CSS Intermediate - Grouping and Nesting

Complete CSS Tutorial

First Step - Beginner CSS	Second Step - Intermediate CSS	Third & Final Step - Advanced CSS
1. Applying CSS	1. Class and ID Selectors	1. Display
2. Selectors, Properties, and Values	2. Grouping and Nesting	2. Page Layout
3. Colors	3. Pseudo Classes	3. At-Rules
4. Text	4. Shorthand Properties	4. Pseudo Elements
5. Margins and Padding	5. Background-images	5. Specificity
6. Borders
7. Putting It All Together

Grouping

You can give the same properties to a number of selectors without having to repeat them by separating the selectors by commas.
For example, if you have something like:

h2 {
 color: red;
}

.thisOtherClass {
 color: red;
}

.yetAnotherClass {
 color: red;
}

You could make it:

h2, .thisOtherClass, .yetAnotherClass {
 color: red;
}

Teach Yourself  by BH24 HTML Editor Tool!

CSS Tutorial by BH24

Nesting

If the CSS is structured well, there shouldn't be a need to use many class or ID selectors. This is because you can specify properties to selectors within other selectors.
For example:

#top {
 background-color: #ccc;
 padding: 1em
}

#top h1 {
 color: #ff0;
}

#top p {
 color: red;
 font-weight: bold;
}

Removes the need for classes or ID's if it is applied to HTML that looks something like this:

<div id="top">

 <h1>Chocolate curry</h1>

 <p>This is my recipe for making curry purely with chocolate</p>

 <p>Mmm mm mmmmm</p>

</div>

 Teach Yourself  by BH24 HTML Editor Tool!

This is because, by separating selectors with spaces, we are saying 'h1 inside ID top is colour #ff0' and 'p inside ID top is red and bold'.
This can get quite complicated (because it can go for more than two levels, such as this inside this inside this inside this etc.) and may take a bit of practice.