Support for Cascading Style Sheets in Visual Studio 2008

Posted: October 14, 2008 in ASP.Net

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s