ASP 101 - Active Server Pages 101 - Web03
The Place ASP Developers Go!

Please visit our partners


Windows Technology Windows Technology
15 Seconds
4GuysFromRolla.com
ASP 101
ASP Wire
VB Forums
VB Wire
WinDrivers.com
internet.commerce internet.commerce
Partners & Affiliates














ASP 101 is an
internet.com site
ASP 101 is an internet.com site
IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

ASP 101 News Flash ASP 101 News Flash



 Top ASP 101 Stories Top ASP 101 Stories
Getting Scripts to Run on a Schedule
The Top 10 ASP Links @ Microsoft.com
What is Adovbs.inc and Why Do I Need It?

QUICK TIP:
Never Use CreateObject
Show All Tips >>
ASP 101 RSS Feed ASP 101 Updates


Support for Cascading Style Sheets in Visual Studio 2008

by John Peterson

Introduction

Those of you who visit the site regularly probably already know that design and graphics aren't really my strong suit. While I can write some darn pretty source code, I prefer to leave the graphics and UI design to the truly artsy souls. You know... people that can actually choose a color in a manner that doesn't involve simply adding 33 to or subtracting 33 from one part of the color's RGB hex triplet. (For those of you who have no idea what I'm talking about, check out Wikipedia's entry on Web Colors.)

That being said, if you're a Web developer the line between development and design gets awfuly blurry at times. It starts with a request to see if you can speed up a search page. Then you're moving the search button from the bottom of the form to the top so that people can find it more easily. Before you know it, you're making the blue "just a touch lighter" because the boss' daughter doesn't like the color the designer picked! It's scary, but it happens. Assuming you hired a designer that used cascading style sheets (CSS), you're in luck. With the release of Visual Studio 2008, you now have first rate CSS tools built right into your development environment.

The CSS tools are exactly the same across the entire Visual Studio 2008 line and just to prove it, I'll be using the free Visual Web Developer 2008 Express Edition to design the pages and for the screen shots for the rest of this article.

The Sample Files

For the rest of this article, I'm going to be playing with the following two files: default.htm and default.css. They're nothing exciting, but for reference I'm including the full listing for both of them here.

default.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>CSS Support in VS2008</title>
    <link href="default.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .darker
        {
            color: #FFFFFF;
            background-color: #666666;
        }
    </style>
</head>
<body>

<h1>CSS Support in VS2008</h1>

<p>
Testing Visual Web Developer 2008 Express Edition CSS support.
Testing Visual Web Developer 2008 Express Edition CSS support.
Testing Visual Web Developer 2008 Express Edition CSS support.
Testing Visual Web Developer 2008 Express Edition CSS support.
</p>

<p class="plainborder">
Testing Visual Web Developer 2008 Express Edition CSS support.
Testing Visual Web Developer 2008 Express Edition CSS support.
Testing Visual Web Developer 2008 Express Edition CSS support.
Testing Visual Web Developer 2008 Express Edition CSS support.
</p>

<p id="specialcase">
Testing Visual Web Developer 2008 Express Edition CSS support.
Testing Visual Web Developer 2008 Express Edition CSS support.
Testing Visual Web Developer 2008 Express Edition CSS support.
Testing Visual Web Developer 2008 Express Edition CSS support.
</p>

<p class="darker">
Testing Visual Web Developer 2008 Express Edition CSS support.
Testing Visual Web Developer 2008 Express Edition CSS support.
Testing Visual Web Developer 2008 Express Edition CSS support.
Testing Visual Web Developer 2008 Express Edition CSS support.
</p>

<p style="color: #CCCCCC; background-color: #000099;">
Testing Visual Web Developer 2008 Express Edition CSS support.
Testing Visual Web Developer 2008 Express Edition CSS support.
Testing Visual Web Developer 2008 Express Edition CSS support.
Testing Visual Web Developer 2008 Express Edition CSS support.
</p>

</body>
</html>

default.css:

body
{
    font-family: 'Times New Roman' , Times, serif;
    background-color: #999999;
}
h1
{
    font-style: italic;
    color: #000099;
}
p
{
    font-family: Arial, Helvetica, Verdana;
    font-size: smaller;
    color: #000099;
    background-color: #CCCCCC;
}
.plainborder
{
    border: thin #000000 solid;
}
.fancyborder
{
    border: medium dotted #FF00FF;
}
#specialcase
{
    font-style: italic;
    font-weight: bold;
}

While the styles are pretty boring, I've done my best to include samples of the different types of styles and have included some styles that override others for illustration later. The resulting Web page is relatively simple, but I'll include a picture of it rendered in IE7 for reference.

CSS Support in Visual Studio 2008

I'm going to break down the CSS support in VS 2008 by the different windows and toolbars it provides for you to work with styles. That basically leaves us with five sections to cover:

  1. The CSS Outline Window and Modify Style Dialog Box
  2. The Style Application Toolbar
  3. The Apply Styles Window
  4. The Manage Styles Window
  5. The CSS Properties Window

The CSS Outline Window and Modify Style Dialog Box

CSS isn't exactly new.... and neither is Visual Studio's support for it. I don't remember if Visual InterDev 1.0 included any CSS support, but I still have a machine with VID 6.0 (I won't go into the whole versioning story, but 6.0 was essentially version 2) and it does a decent job of editing a CSS file, but unfortunately that's as far as its support for CSS goes. Oddly enough, that's about as far as CSS support in Visual Studio went for quite a while. That support is pretty much equivalent to what is offered by the "CSS Outline" window and the "Modify Style" dialog box in VS 2008.

While you are editing a style sheet in the editor, Visual Studio will show you the "CSS Outline" window. This window shows you all the styles defined in the sheet in a nice tree view format. When you click on one of them you're taken to the definition of the style in the code window.

If instead of left-clicking on a style's name you right-click and select "Build Style...", you'll be presented with the "Modify Style" dialog box. This box allows you to edit the various properties of the style. It's a life saver for us mere mortals who don't happen to have all the CSS options memorized.

You'll see this dialog box over and over... it's accessible from almost anywhere that styles are used. Wherever you see an option to "Modify Style...", "Build Style...", or "Apply New Style...", you'll be getting this dialog box in one form or another. It's a useful tool, but honestly it's not that exciting so I'm not going to discuss it much.

While you're editing a CSS file you'll also see the "Style Sheet" toolbar. It doesn't do much that you can't easily do elsewhere, but it does provide a convenient place to tell Visual Studio what version of CSS it should attempt to validate your style sheets against.

Which can come in handy if you spell as poorly as I do!

These features are pretty much on par with what pervious versions of Visual Studio offered in terms of CSS support. Luckily VS 2008's support for CSS doesn't end there.

The Style Application Toolbar

The "Style Application" toolbar is an interesting concept. What it does is allow you to create and modify styles automatically.

In the following screen shot, I've selected the second paragraph (the one using the "plainborder" class style) in the design window. Then from the "Style Application" toolbar I indicated that the ".plainborder" style should be the "Target Rule". Now any changes I make to the formatting of this section won't actually be applied to the highlighted text... they'll be added to the ".plainborder" style and will therefore affect everything that uses this particular style.

If I did want to change just this one instance, the drop down list gives me options that allow that as well: "(New Inline Style)" and "(New Auto Class)" both allow you to create a new style on the fly.

The Apply Styles Window

The apply styles window is probably the most visual of the new tools. It's main purpose is to apply styles to content, but you'll find it does much more then that.

While you'll find previews of your styles in most of the windows, this is the only one that shows you previews of all the styles at once. This makes it great for comparing different styles that may be similar. A perfect example is the two different border styles ("plainborder" and "fancyborder") defined in the screen capture above.

It also indicates with a blue border which styles are applied to the currently selected element in the "Design" window. Notice that the selected paragraph tag is being affected by both the <p> element style from "default.css" as well as an unnamed inline style.

The last thing to notice is that there are four different colored dots next to the different styles. These indicate the type of style:

  • Blue - element-based style
  • Green - class-based style
  • Red - ID-based style
  • Yellow - inline style

Some dots also have a gray circle around them. The circle around a dot means that the style is used somewhere in the current document. You'll see the same dot system used in the "Manage Styles" window as well.

The Manage Styles Window

The "Manage Styles" window is similar to the "Apply Styles" window in that it lists the styles defined both in the current page as well as in any linked style sheets. It doesn't however display a sample of all the styles at once. It will show you the style's code if you hover over a style and will show you a preview of the selected style, but by not showing you all the previews at once it allows the display to be more compact and easier to manage.

I guess now is as good a time as any to show that you do quite a bit from the context menu. Almost anywhere a style is listed you can right-click on it to get a menu similar to the one show below. From here you can apply a style, jump to its code, select all the elements that use it, create, modify, and delete styles, and even link to another CSS file.

One of the coolest things about the "Manage Styles" window is that you can also drag and drop styles. For example, dragging the "fancyborder" style from the "default.css" file to the current document moves the style declaration from one file to another without you ever having to see the code.

This makes transferring all those styles you have defined on individual pages to an external style sheet a breeze. The "Manage Styles" window will be invaluable to anyone trying to clean up existing style sheets no matter who created them or how convoluted they may be.

The CSS Properties Window

For the following screen captures, I left the 4th paragraph selected the entire time (the <p class="darker"> one). By simply clicking on the different entries under "Applied Rules" at the top of the "CSS Properties" window you can see what properties are applied at each level. Even better, if a property is overridden further down or won't display, it's shown with a red line through the property indicating that it won't apply. Even better yet... if you hover over that property it will tell you what overrides it or why it won't display!

You should also notice that when you select an applied rule, the window automatically indicates where that rule is defined. If you want to go there all you have to do is right-click and select "Go To Code".

If that's all it did the window would still be a useful tool, but perhaps the most powerful feature of the "CSS Properties" window is the little button in the top right corner. If you click the "Summary" button, you'll get a list that includes all the properties that are applied to the highlighted content in the main editor window. This list isn't just what's defined by one particular style or rule... it's a list of all the properties from the top level on down. Now whenever something doesn't render the way you expect it to, finding the offending style is amazingly simple.

Conclusion

The CSS support in Visual Studio 2008 is quite frankly some of the best I've seen in any product. I hope this article has given you a taste of how much power and control these tools give you to manage your styles. My favorite things are the overview you're given via the "CSS Properties" window's "Summary" button and the fact that you can drag and drop styles between the current page and multiple external CSS files without ever actually seeing the declaration. The bottom line is, if you deal with CSS files in almost any capacity, getting a hold of Visual Studio 2008 (even if it's the free Visual Web Developer 2008 Express Edition) isn't an option... it's a necessity.

More Information


Home |  News |  Samples |  Articles |  Lessons |  Resources |  Forum |  Links |  Search |  Feedback

Internet.com
The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers