Now that we have all of the Basics of CSS down pat, we can move onto more advanced methods of writing and implementing style sheets!

Today we're going to talk about grouping and nesting selectors and dimensions.

Grouping and Nesting

You might find yourself with selectors having the same values inside of your internal or external style sheet. Maybe it is about a specific link within a certain area of your web site, heading elements, or just about anything else you would want to group.

Grouping

Grouping allows us to apply multiple properties and values to multiple selectors but in a condensed fashion.

Let us assume we have some code:

h1 {color: #ff9300;}
h3 {color: #ff9300;}
span {color: #ff9300;}
p {color: #ff9300;}

So we have everything within the h1, h3, span, and p elements is the color #ff9300. Since all of these elements have a common property we can group these elements like this:

h1, h3, span, p {color: #ff9300;}

This space saver will have the same effect but on multiple selectors. The single color property will be applied to all of these html elements. Note: grouping elements will apply all properties and values to the grouped elements. Example:

html, body, p, span, a:link, {
     margin: 0;
     padding: 0;
     font:verdana, "Times New Roman", sans serif;
     color: #ff9300;
}

This means margin:0; padding:0; font:verdana, "Times New Roman", sans serif; and color#ff9300; will be applied to all of those selectors.

Nesting

Nesting will allow you to apply styles to a selector within a selector. Consider the following:

#fancy p {
     background-color:#000;
     font-weight:700;
     text-decoration:none;
     color:#ff9300;
}

So we have our ID selector with an extra selector after it. So if we have something with the ID selector such as:

<div id="fancy">
     <p>Some fancy text here</p>
</div>

It is saying everything within the fancy ID that is inside of any p element will have all of those properties and values. We have used this type of nesting in earlier CSS tutorials.

Dimensions

We covered the width and height properties in the box model tutorial. We going to introduce a few new properties that we can use to further control how tall/wide an element is.

The Height property will set the height of the element and the Width property will set the width of the element. Consider the following code:

h2, h3 {
     height:100px;
     width:300px;
}

This will set all h2 and/or h3 elements to w height of 100px by 300px regardless of how much space it is taking up on the page. These two elements will always be this height. What if we wanted those two elements to be within a certain area of space?

Properties

  1. width - defines width (will always be)
  2. height - defines height (will always be)
  3. max-width - defines max width (cannot be bigger than)
  4. min-width - defines min width (will not be smaller than)
  5. max-height - defines max height (cannot be taller than)
  6. min-height - defines min height (will not be shorter than)

The last four properties are new to us. So let us improve on the previous code!

h2, h3 {
     max-height:100px;
     max-width:300px;
}

Given the code above, this will set the h2 and h3 elements to be no larger than 100px by 300px but can also be 0px by 0px if the element is empty (has no content).

Although it seems like this property would be somewhat useless, there has been situation where something a web page wasn't working the way I wanted it to. Perhaps the top navigation menu was wrapping when I resized the browser windows and I wanted the entire page to keep its consistency. I would use a max-width and min-width property to define the space, lo and behold it worked!

For a very comprehensive overview of the above tutorial, please click on the download button below.

advanced-part1.zip
advanced-part1.zip
Size: 66.72 KB
Be Sociable, Share!