What does the red strikethrough in CSS property grid mean?

In Visual Studio Orcas, the CSS property grid renders a red strikethrough when it wants to tell you that a property is either non-inherited or it is overridden by a rule with higher precedence.

Read the tooltip when you see a red strikethrough on your property and it will give you the exact reason for the strikethrough. Here are the different reasons why you might be seeing this red strikethrough in your CSS property grid.

1. Property is overridden by an inline style

You will see this tooltip when a CSS property is overridden by an HTML tag’s inline style. Let us look at an example:

.MyStyle {color: #808000;}

</style>

…

Here, we have the color property applied to a HTML button control via inline style and also via class attribute. The class is declared in the style block.

Since the color property set in the inline style takes precedence over the class, the color in MyStyle will appear with a red strikethrough. You will see a tooltip like this:

2. Property is overridden by a CSS rule

You will see this kind of tooltip when a CSS property is overridden by another CSS rule.

In the following example, the property “color” is applied to a DIV and it is also set to a HTML button control within the DIV via MyStyle.

.MyStyle {color: #808000;}

</style>

…

</div>

Select the property “color” with a red strikethrough while in Summary mode. The tool tip will be as follows:

3. Property is overridden by the rule where it is marked !important

This type of tooltip is seen when a CSS property is overridden by another CSS rule’s property because the property was marked !important.

Say, we have

P{ color:Green!important }

</style>

…

<p style=”color:red”> Hello World!!</p>

then the text Hello World!! will be displayed in green and not red in spite of red being applied via inline. This is because property color: Green is marked important. In this case the tool tip will read:

4. Property is not inherited

This tooltip comes up when a property is not inherited by the child tags.

In the example below, we have a button within a DIV. Note that the height property here is set on the DIV.

<asp:Button ID=”MyButton” runat=”server” text=”Button” />

</div>

Now if you select the button and open up CSS property grid, you will see the height property in red strikethrough. The tool tip in this case will read:

5. Property is not inherited but may show within child elements that don’t set this property

This is the tooltip when a property is not inherited by child tags. This is similar to #4, except that it only applies to background-image and background-color. For those properties the default value is set to none and transparent, therefore the parent tag’s value is visible through the child tag.

<span>Hello world</span>

</div>

Here we have a SPAN within a DIV. The DIV has background-color set via an inline property. Now if you select the SPAN and open up CSS property grid, you will see background-color in red strikethrough. The tool tip in this case will read: