Walkthrough: Working with an Existing CSS File

Article
07/10/2012

This walkthrough introduces the cascading style sheets (CSS) features of Visual Studio. It guides you through creating and modifying a two-column page layout. It also illustrates the basic techniques of creating a webpage and a new cascading style sheet.

Note

The examples in this topic are specific to ASP.NET Web Forms pages. You can use Source view for editing pages in ASP.NET MVC (Model View Controller) or ASP.NET Web Pages applications (.cshtml files), but Design view is fully supported only for Web Forms pages.

This walkthrough illustrates the following tasks:

Creating a file system website.
Using CSS-oriented features of Visual Studio.
Creating a two-column page layout by using CSS.

Note

This walkthrough shows additional features of Visual Studio that were not covered in Walkthrough: Creating and Modifying a CSS File.

Prerequisites

You need the following components to complete this walkthrough:

Visual Studio or Visual Studio Express for Web installed on your computer.

Note

If you are using Visual Studio, the walkthrough assumes that you selected the Web Development collection of settings when you started Visual Studio the first time. For more information, see How to: Select Web Development Environment Settings.
A general understanding of how to work in Visual Studio.

For an introduction to how to create webpages in Visual Studio , see Walkthrough: Creating a Basic Web Forms Page in Visual Studio.
An image that you can add to the webpage. The actual image is not important; you will use the image only to illustrate positioning features.

Creating a website

In this part of the walkthrough, you create a website and add a page to it.

If you have already created a website in Visual Studio (for example, by following the steps in Walkthrough: Creating a Basic Web Forms Page in Visual Studio), you can use that website and go to "Adding HTML Elements and a CSS File" later in this walkthrough. Otherwise, create a website by following these steps.

Note

The default project template for ASP.NET websites and ASP.NET Web applications contains a Site.css file. This file contains CSS rules that define the look of the master page (Site.master) and content pages (Default.aspx and About.aspx). This walkthrough shows you how to start with an empty ASP.NET website project and then add CSS features to the site.

To create a file system website

Open Visual Studio or Visual Studio Express for Web.
In the File menu, choose New website.

The New website dialog box is displayed.
Under Installed Templates, choose Visual Basic or Visual C# and then select ASP.NET Empty website.
In the Web location box, select File System, and then enter the name of the folder where you want to keep the pages for your website.

For example, type the folder name C:\WebSites.
Click OK.

Visual Studio creates a website project that includes a Web.config file, but no other pages or files.
In Solution Explorer, right-click the name of the website, choose Add, and then choose Add New Item.
Select Web Form, name the page Default.aspx, and then click Add.

Visual Studio creates the Default.aspx page and opens it in Source view.

Adding HTML Elements and a CSS File

To enable you to focus on the formatting and styling tools instead of creating elements to style, a set of elements is provided in this section. You can copy and paste these elements into a page. The code includes sections made with div elements that include a banner, left and right sidebar sections, a main content section, and a footer. These simple elements contain text that you can work with and element IDs. In some cases, the elements contain CSS classes that you can use to style-specific elements on a page.

Adding HTML Elements

This section adds content to work with. The page consists of a banner with text and a search box, a footer, and three sections of text. The main content of the page is in the last text section.

To add HTML elements to the page

Open the Default.aspx page in Source view.

Add the following code after the <form> element.

<div id="pagecontainer">
<div id="banner">
<h1>AdventureWorks Styling Page</h1>
<h2>Making CSS Styling Easier in Design View</h2>
<div id="search">Find:<input id="searchbox" type="text" />
<input id="searchbutton" type="button" value="Go" />
</div>
</div>
<div id="leftsidebar" class="column">
<h3>Matters of the Web</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim 
lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada 
rutrum.</p>
</div>
<div id="rightsidebar" class="column">
<h3>Matters of the Web</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim 
lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada 
rutrum.</p>
</div>
<div id="maincontent" class="column">
<h2>Matters of the Web</h2>
<p> Pellentesque mattis tincidunt ipsum. Donec tempus, nunc vitae rhoncus imperdiet, eros turpis accumsan risus, ut luctus ipsum 
lacus a felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean convallis euismod 
nulla. Suspendisse potenti. Donec in mi nec odio tincidunt luctus. Donec euismod, mauris cursus molestie convallis, quam 
pede tempus magna, mollis dapibus quam est et magna. Aenean eros massa, elementum vehicula, dapibus eget, lobortis non, 
mauris. Vivamus nisl ante, interdum eget, sagittis vel, scelerisque nec, magna. Praesent placerat nibh vel metus viverra 
tincidunt.</p>
<asp:Image ID="Image1" runat="server"/>
<p>Fusce magna urna, gravida non, sodales vehicula, consequat ac, lacus. Ut sed eros sit amet neque malesuada 
malesuada. Fusce porttitor cursus eros. Maecenas libero odio, convallis vel, tristique id, sodales vel, leo. Curabitur nibh 
neque, interdum eget, convallis id, adipiscing nec, risus. Suspendisse rutrum dui sed urna. Pellentesque leo felis, tempor eu, 
convallis venenatis, auctor vitae, justo. In at massa.</p>
</div>
<div id="footer">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2007.</p>
</div>
</div>

Save the page.
Switch to Design view to see the default formatting.

Adding a CSS File

In this section, you add a cascading style sheet (.css file) that styles the elements that you added to the page in the last section. The style sheet uses both ID-based and class-based style rules.

To add a CSS file

In Solution Explorer, right-click the name of the website, choose Add, and then choose Add New Item.

The Add New Item dialog box appears.
In the installed templates pane, choose Style Sheet.
In the Name box, type Layout.css, and then click Add.

The editor opens a new style sheet that contains a body style rule.

Remove the body style rule, and then paste the following rules into the file.

#pagecontainer {
    width: 800px;
}
#banner {
    height: 126px;
    padding-top: 18px;
    background-color: #DD6B26;
}
#search {
    width: 254px;
    position: absolute;
    top: 115px;
    left: 545px;
    font-family: "Lucida Sans";
    font-size: small;
    color: #930626;
}
#leftsidebar {
    width: 188px;
    float: left;
    padding-right: 10px;
}
#rightsidebar {
    width: 238px;
    float: right;
    padding-left: 6px;
}
#maincontent {
    border-left: 1px solid #DD6B26;
    margin-left: 203px;
    margin-right: 260px;
    padding-left: 13px;
    padding-right: 13px;
}
#footer {
    text-align: center;
    background-color: #DD6B26;
}
h1 {
    font-family: "Lucida Calligraphy";
    font-size: x-large;
    font-weight: bold;
    color: #930626;
    text-align: center;
    height: 42px;
    margin-bottom: 0px;
}
h2 {
    font-family: "Lucida Sans";
    font-variant: small-caps;
    font-size: large;
    color: #307630;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0px;
    margin: 0;
    padding: 0;
}
p {
    font-family: "Palatino Linotype";
    font-size: medium;
}

Save the file.

Adding Style Rules to the Style Sheet

When you are working with an existing CSS style sheet, you can use the Manage Styles window to change the style rules in the style sheet. In this walkthrough, you modify the page from the original three-column layout to a two-column layout. You then remove the styles that applied to the original layout.

Removing the Right Column and Restyling

To change the page layout to a two-column layout, you can remove the code that creates the right column. You can then restyle the other elements to create the two-column layout.

To remove the right column code and formatting

Open or switch to the Default.aspx page in Design view.
From Solution Explorer, drag the .css file that you have created and drop it on the page.

This action links the .css file to the current page. The page changes to reflect the styles that are defined in the .css file.
Switch to Source view.
Delete the div element that starts with <div id="rightsidebar" class="column">.
Save the file.
In the View menu, choose Manage Styles.

The Manage Styles window appears. (By default, the window is docked.)
In the Manage Styles window, right-click the #rightsidebar style and then click Delete.

Note

The icon for the #rightsidebar style does not have a double square around it, which indicates that it is no longer used and can be removed.
In the Manage Styles window, right-click the #maincontent style and then click Modify Style.

The Modify Style dialog box appears.
Under Category, click Box.
Under margin, change the value of the right box to 0.
Click OK.
Switch to Design view. You now have a two-column layout.
Save the file.

Adding an Image

Before setting the style of an image, you must add the image to the project and set the ImageUrl property of the image.

To add an image to the project

In Solution Explorer, right-click the name of the website, choose Add, and then choose Existing Item.

The Add Existing Item dialog box appears.
In the dialog box, set the file type to Image Files.
Select an image file and click Add.

Now that the image has been added to your project, you must assign the image to the Image control that is already on the page.

To assign an image to the Image control

Open or switch to the Default.aspx file in Design view.
Select the Image control on the page.
In the Properties window, next to ImageUrl, choose the ellipsis button (...) to set the control's ImageUrl property.

The Select Image dialog box opens.
Choose the image that you added to the project, and then click OK.

Adding Style Rules to Format the Image

To improve the flow of text around the image, you can float the image to the left or right edge of the main column. You can also add padding, which moves the text away from the image.

To add images to the layout

Open or switch to the Layout.css file.

Add the following code to the style sheet.

img {
    margin: 0px;
    border: 1px solid #DD6B26;
    padding: 5px;
}
.floatright {
    margin-left: 10px;
    float:right;
}
.floatleft {
    float: left;
    margin-right: 10px;
}

Save the style sheet.
Switch to the Default.aspx file in Design view.
Select the Image control, which at this point will be showing the image that you added to the project.
In the Manage Styles window, apply either the floatright or the floatleft CSS style to the Image control by right-clicking the CSS style and selecting Apply Style.

The CSS style you selected is assigned to the img style.

Note

If the image is too large, applying the style can have no visible effect on the image position and text flow. In this case, reduce the image size before you apply the style.

Next Steps

This walkthrough illustrated the basic techniques for working with CSS styles by using the user interface in Visual Studio. You might also want to explore the following ways you can control the appearance of webpages:

Working with a new style sheet. For more information, see Walkthrough: Creating and Modifying a CSS File.
Setting style information programmatically for HTML elements. For more information, see How to: Set HTML Server Control Properties Programmatically.
Creating themes and skins, which let you specify not only CSS styles, but almost any property of an ASP.NET control. For more information, see ASP.NET Themes and Skins.