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.
css1.jpg
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:
  1. header {
  2. font-size:12px;
  3. }
The CSS Editor will automatically indent style rules based on their selectors in order to display the Cascading Hierarchy.
  1. header
  2. {
  3. header h1
  4. }
  5. header h1:hover
  6. {
  7. }
  8. header h2
  9. {
  10. }
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.
  1. header
  2. {
  3. font-size:12px;
  4. }
  5. header h1
  6. {
  7. }
  8. header h1:hover
  9. {
  10. }
  11. span, header h1.label
  12. {
  13. }
  14. header h2
  15. {
  16. }
Step 4
Many Web Developers use a CSS hack to target certain browsers only.
  1. header
  2. {
  3. font-size:12px;
  4. }
  5. header h1
  6. {
  7. }
  8. header h1: hover
  9. {
  10. }
  11. > body header h1 mark
  12. {
  13. }
  14. span, header h1.label
  15. {
  16. }
  17. header h2
  18. {
  19. }
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.