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>
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:
The CSS Outline Window and Modify Style Dialog Box
The Style Application Toolbar
The Apply Styles Window
The Manage Styles Window
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.
