CSS Editor Hierarchical Indentation in .NET 4.5

Introduction

 

In this article, we learn about a new feature of the CSS Editor, "Hierarchical Indentation".

 

Visual Studio 4.5 features a brand new CSS editor that introduces many improvements. One of the most visible of these is Hierarchical Indentation.

 

Step 1

 

First of all, right-click on your project and click on "Add New Item". A window will be opened, from this window select the "Style Sheet" to add the CSS Style Sheet to your project.

 

 

Step 2

 

As you add the CSS Style Sheet, you will see a new page opened in front of you. On that page write the following code:

header {
    font-size:12px;
      }

The CSS Editor will automatically indent style rules based on their selectors in order to display the Cascading Hierarchy.

header
   {
    header h1
    }
       header h1:hover
         {
         }
    header h2
    {
    }

This feature gives the document more structure and improves the overall readability.

 

Step 3

 

The hierarchy will even be maintained when using multiple selectors for the same rule.

header
{
    font-size:12px;
}
    header h1
     {
     }
        header h1:hover
         {
         }
        span, header h1.label
        {
        }
    header h2
    {
    }

Step 4

 

Many Web Developers use a CSS hack to target certain browsers only.

 

header
{
    font-size:12px;
}
    header h1
     {
     }
 header h1: hover
         {
         }
        > body header h1 mark
        {
        }
        span, header h1.label
        {
        }
    header h2
    {
    }

Here in the code above you also can see that the greater than (>), body and selector hack used here are recognized by the CSS Editor and the Hierarchical Indentation remains intact.