NEW CSS SUPPORT ON VISUAL STUDIO 2008 AND VISUAL STUDIO WEB DEVELOPER!!

Sunday, November 25, 2007

CSS Visual Studio 2008

VS2008 now uses the engine of Microsoft Expression instead of Microsoft Frontpage to create and edit the web pages you added to your project/web site.

The great new here is that now we'll handle CSS properties in a more efficient way and within more IDE support.

A good source of information for this subject can be found here.

If you can't see the toolbox , CSS properties or Manage Style windows/tabs, just go on View menu and select CSS Properties, Toolbox and Manage Styles.

Let's start showing up where it is.

If you take a look on the toolbox window (here it isn't docked on the IDE, it's floating), there is two more tabs on the bottom os the window. On CSS Properties you can see the CSS properties for a selected element on the page and also see some messages that will help you to find out why that property is appearing in a wrong way!

This is an empty property, when you didn't select anything yet.

And this is the CSS Properties for an element selected on the page. Note that the background color is strikethrough in red. Don't worry, following I'll tell why this red strikethrough can appear.

And the image above shows up the manage style tab where you can see how a style will appear and add new styles if you want to.

As you can see, now we can visually know what's going on with the CSS's.

The red strikethrough.

As published by Peter Spada and Reshmi Mangalore, there are a few reasons on why a property is striked with a red line.

The code to reproduce these messages I'll paste at the end of the post.

1 - The property defined on the StyleSheet is been overriden by an inline property. If you setted a color property on your StyleSheet and on the element tag you write the color attribute, you'll see the red line and a message something like this:

2 - The property is overridden by a CSS rule. It means that the configuration you setted it's not being used because another CSS rule. For an example, you set the color attribute of a DIV tag to a desired color and then inside the DIV you put an element with a CSS rule diferent from its parent. When this happen, you will see something like:

3 - Property is overridden by a rule marked as '!important'. In this case, although you setted something a 'huge force' is setting it different. For an example, you got an element and this element has a CSS property seeted to its ID marked as !important. When you try to set a different style on the tag, you'll see:

4 - Property is not inherited or it's not inherited but may appear on some child elements. This happen when you set a property of a container element and add child elements on it. Some properties are not implemented on all elements but may appear. For an example the height of a DIV tag is not inherited by its childs as is the backcolor of a div also is not inherited by a button but can be shown thru a Paragraph.

Source Code!

Here is the html code I used to capture this post images. Just paste it on a page inside VS2008 Web Developer and select any of the buttons and Divs to see the above messages and images.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>CSS Edit Tests</title>
    <style type="text/css">
     .MyStyle {color:Red; }
     .MyImportantStyle {color:Green; }
     #AnotherButton {color: Orange!important; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="myButton" runat="server" Text="Click Here"
            class="MyStyle" style="color: Navy" />
    </div>
    <div style="color: Blue">
        <asp:Button ID="myNewButton" runat="server" Text="Or click here" class="MyStyle" />
    </div>

See you.

Chilá!@!

The red strikethrough.

Source Code!

1 Comment