Walkthrough: Working with an Existing CSS File

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.

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 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.

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.

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: