Export (0) Print
Expand All

Walkthrough: Working with an Existing CSS File

This walkthrough introduces the cascading style sheets (CSS) features of Visual Studio 2010. 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 2010 that were not covered in Walkthrough: Creating and Modifying a CSS File.

You need the following components to complete this walkthrough:

  • Visual Studio or Visual Web Developer Express installed on your computer.

    NoteNote

    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 Web pages in Visual Studio , see Walkthrough: Creating a Basic Web Page in Visual Studio.

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

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 Studio), 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.

NoteNote

The default project template for ASP.NET Web sites 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). In order to show you how to create and work with CSS in ASP.NET Web pages, this walkthrough starts with an empty Web site project, and you explicitly add CSS features to the site.

To create a new file system Web site

  1. Open Visual Studio or Visual Web Developer Express.

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

    The New Web Site dialog box is displayed.

  3. Under Installed Templates, click Visual Basic or Visual C# and then select ASP.NET Empty Web Site.

  4. 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 Web site.

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

  5. Click OK.

    Visual Studio creates a Web site project that includes a Web.config file, but no other pages or files.

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

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

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.

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.

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.

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.

This walkthrough illustrates 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 Web pages:

Community Additions

ADD
Show:
© 2014 Microsoft