Walkthrough: Working with an Existing CSS File

  • Article

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

This walkthrough illustrates the following tasks:

  • Creating a file system Web site.

  • Using CSS-oriented features of Visual Web Developer.

  • Creating a two-column page layout by using CSS.

    NoteNote:

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

Prerequisites

You need the following components to complete this walkthrough:

  • Visual Studio 2008 or Microsoft Visual Web Developer Express. For download information, see the Microsoft Visual Studio Express Editions Web site.

  • The .NET Framework version 3.5.

  • An image that you can add to the Web page. The actual image is not important; you will use the image only to illustrate positioning features.

Creating a Web Site

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

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

To create a new file system Web site

  1. Open Visual Web Developer.

  2. On the File menu, click New Web Site.

    The New Web Site dialog box is displayed.

  3. Under Visual Studio installed templates, click ASP.NET Web Site.

  4. In the Location box, select File System and type the name of the folder where you want to keep the pages of the Web site.

    For example, type the following folder name: C:\CSSWebSite

  5. In the Language list, click Visual Basic or Visual C#.

    The programming language you select will be the default for your Web site, but you can set the programming language for each page individually.

  6. Click OK.

    Visual Web Developer creates the folder and a new page named Default.aspx.

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

  1. Open the Default.aspx page in Source view.

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

  3. Save the page.

  4. 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 formats and 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

  1. In Solution Explorer, right-click the name of the Web site, and then click Add New Item.

    The Add New Item dialog box appears.

  2. Under Visual Studio installed templates, click Style Sheet.

  3. In the Name box, type Layout.css, and then click Add.

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

  4. 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;
}

  5. 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 will modify the page from the original three-column layout to a two-column layout. You will 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

  1. Open or switch to the Default.aspx page.

  2. Switch to Design view.

  3. From Solution Explorer, drag the .css file that you have created and drop it on the page.

    This links the .css file to the current page. The page changes to reflect the styles that are defined in the .css file.

  4. Switch to Source view.

  5. Delete the div element that starts with <div id="rightsidebar" class="column">.

  6. Save the file.

  7. In the Format menu, click CSS Styles, and then click Manage Styles.

    The Manage Styles window appears. (By default, the window is docked.)

  8. In the Manage Styles window, right-click the #rightsidebar style and then click Delete.

    NoteNote:

    The icon for the #rightsidebar style does not have a circle around it, which indicates that it is no longer used on the page and can be removed.

  9. In the Manage Styles window, right-click the #maincontent style and then click Modify Style.

    The Modify Style dialog box appears.

  10. Under Category, click Box.

  11. Under margin, change the value of the right box to 0.

  12. Click OK.

  13. Switch to Design view. You now have a two-column layout.

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

  1. In Solution Explorer, right-click the name of the Web site, and then click Add Existing Item.

    The Add Existing Item dialog box appears.

  2. Select an image file and click Add.

Now that the image has been added to your project, you must assign the image to an Image control.

To assign an image to the Image control

  1. Open or switch to the Default.aspx file.

  2. Switch to Design view and select the Image control.

  3. In the Properties window, set the Image control's ImageUrl property to the URL of the newly added image file.

Adding Style Rules to Format the Image

To make the image flow better with the text, you can float the image to either the left or right edge of the main column and add padding, which moves the text away from the image.

To add images to the layout

  1. Open or switch to the Layout.css file.

  2. 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;
}

  3. Open or switch to the Default.aspx file.

  4. Switch to Design view and select the Image control.

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

Next Steps

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

See Also

Tasks

Walkthrough: Creating and Modifying a CSS File

Concepts

Working with CSS Overview

ASP.NET Web Server Controls and CSS Styles

How to: Use the CSS Properties Window