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 amd selector hack used here are recognized by the CSS Editor and the Hierarchical Indentation remains intact.