Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to Start Working on CSS - Grouping and Nesting

In this article I will cover the basic functionality of CSS Grouping and Nesting. Grouping and Nesting are very useful while designing a page, It reduce the CSS script space and complexity.

Introduction:

This tutorial will cover the concept of nesting and grouping in CSS classes. The grouping and nesting are very useful as it reduces the complexity and extra afford.

Description:

Cascading style sheet rules provide flexibility to group elements for same CSS rules. We can write cascading style sheet rules in such a way that they help to form groups of multiple elements and class declaration of an element. With the help of grouping, one can designate same properties to a number of selectors by separating the selectors with comma instead of repeating style again and again for each selector in the code.

While using nesting, helps us to designate specific styles to selectors within a selector. This is an economic way which discards the use of numerous class or ID selectors in the code. But it is only possible if the CSS is well structured.

This is very useful for a web developer to handle large size codes. Specifically talking about CSS code optimization, grouping selectors and using nesting selector can be very helpful in consuming less space.

Grouping Selector:

In this section of the tutorial, it will be shown how one can group all the heading elements and apply the same property and values to all selectors. Each selector is separated by a comma. In the case of the font-family property, you will notice three values. If the user's browser does not support the first value, it will try to apply the second. If the second is not supported, it will continue through the list of values specified.

Listing 1: CSS Grouping Script

<html>
<head>
<title>CSS Grouping - Mrbool.com Tutorials</title>
<style type="text/css">
h1,h2,h3,h4,h5,h6,p
{
color:green;
font-family: Arial, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>Working with Grouping and Nesting in CSS - H1 </h1>
<h2>Working with Grouping and Nesting in CSS - H2</h2>
<h3>Working with Grouping and Nesting in CSS - H3</h3>
<h4>Working with Grouping and Nesting in CSS - H4</h4>
<h5>Working with Grouping and Nesting in CSS - H5</h5>
<h6>Working with Grouping and Nesting in CSS - H6</h6>
<p>This is block of content - Paragraph</p>
</body>
</html> 
Above figure is output of grouping selector script which shows how one can group all the heading elements and apply the same properties and values

Figure 1: Above figure is output of grouping selector script which shows how one can group all the heading elements and apply the same properties and values.

Nesting Selector:

To designate attributes to tags, you needs to provide IDs to it. And sometimes it demands too many IDs which might be confusing and it may become even more complex if one wishes to revisit his codes for the modifications. So, to avoid this confusion you can use the simplest way and that is nesting.

As described above it is nothing but assigning properties or style attributes to child of the parent tag, in other words, assigning property to a selector within a selector. Firstly, one needs to select a particular div using the selector method as discussed earlier and then select particular tags in that element. Following script will compile the idea of nesting selector

Listing 2: CSS Nesting Script

<html>
<head>
<title>CSS Nesting - Mrbool.com Tutorials</title>
<style>
#ID1{
min-width: 200px;
min-height: 100px;
font-size: 20px;
font-family: arial;
color: white;
background-color: #7F7F00;
}
#ID1 h1{
color: #D9D900;
font-size: 20px;
}
</style>
<div id="ID1">This is CSS nesting tutorial, having a <h1>Nested Heading</h1> inside.</div>
<p class="UnknownClass">This is of default style with undefined class.</p>
</body>
</html>
Above figure is output of Nesting selectors

Figure 2: Above figure is output of Nesting selectors

This is very important to know that CSS class declaration for any HTML element also group with its child element as follows

Listing 3: More on CSS Nesting - Script

<html>
<head>
<title>CSS Nesting - Mrbool.com Tutorials</title>
<style>
a{color:#FF0000;} 
a img
{border:10px solid #D9D900;} 
a:hover img
{border:10px solid green;} 
</style>
</head>
<body>
<a href="http://www.Mrbool.com"><img class='imagem_artigo' src="http://mrbool.com/portal2/mrbool_img/logo.jpg" alt="Mrbool.com" title="Mrbool.com"></img></a>
</body>
</html> 
output of listed script which describes CSS class declaration for any HTML element also group with its child element
This is image button containing a link of homepage of Mrbool. When you will click it will open homepage of Mrbool.com.

Figure 3 and 4: Above figure is output of listed script which describes CSS class declaration for any HTML element also group with its child element. This is image button containing a link of homepage of Mrbool. When you will click it will open homepage of Mrbool.com.

Conclusion:

The significance of grouping and nesting in CSS cannot be out looked as it helps in handling large amount of code without consuming much space This tutorial covered the basic knowledge of grouping and nesting. I would suggest that take some complex example and try to implement it and comment here in case of any issues. We at Mrbool, will be happy to answer your queries.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login