Walkthrough: Creating and Modifying a CSS File

This walkthrough introduces the cascading style sheets (CSS) features in Visual Studio. It describes how to create a three-column page layout, and illustrates the basic techniques of how to create a new Web page and a new style sheet.

This walkthrough illustrates the following tasks:

• Creating a file system Web site.

• Customizing the Web site by using the CSS-oriented features.

• Creating a three-column page layout using CSS.

Prerequisites

To complete the walkthrough, you need the following:

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

Creating a Web Site

In this part of the walkthrough, you can create a Web site and add a page to it. In the next section, you can add a CSS file and then run the page in a Web browser.

If you have already created a Web site (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 and Styling Page Elements" 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 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.

Adding and Styling Page Elements

To enable you to focus on the formatting and styling tools instead of creating elements to style, a set of page 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 Page Elements

In the following procedure, you will copy page elements that you can work with by using the CSS tools. The page elements consist of a banner that contains 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 page elements to the default page

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

   Note

   You can use any page that is available in the Web site.

2. Switch to Source view.

3. Inside the form element, remove the empty div element that is created by default.

4. Add the following code after the opening <form> tag:

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

   Note

   To improve the readability of the page, in the Edit menu, click Format Document.

5. Save the page.

6. Switch to Design view to see the default formatting.

Applying Styles in Design View

By using Design view, you can apply styles to page elements and see the results immediately. You do not have to create and modify a .css file and then switch to the page to see whether the styling is what you wanted.

In Design view, you can apply styling to individual elements on a page in the following ways:

• Use inline styles, which are written as the style attribute of an individual element. These style rules can apply only to that element.

• Write style rules in a style element in the HTML head element of the page. These style rules can apply to elements in the current page.

• Write style rules to an external CSS file. In that case, the style rules can apply to any pages in the Web site.

For this part of the walkthrough, you will define formatting and styling rules that are written to the page's style element section. Later, you will move the CSS information that you create to an external style sheet.

Formatting a Page Banner

The first element you will format is the banner section, which includes elements enclosed in the <div ID="banner"> tag. In this example, you will use the Direct Style Application toolbar to change the styling and position of the heading. You will also set the size of the banner area and add a background color.

To format the banner text

1. In Design view, click the heading text in the banner section that reads "AdventureWorks Styling Page".

   Notice that the selection has a blue box around it and a tab that indicates that the h1 element has been selected.

2. In the Style Application toolbar, in the Target Rule list, click Apply New Style.

   The New Style dialog box is displayed.

3. In the Selector list, click h1 so that you can create a style that applies to all h1 elements.

   Notice that the Define in list is set to Current page. This indicates that the style rule is created in a style element on the current page.

4. In the font-family list, select Impact or another font that is typically used for banners.

5. In the font-size box, enter or select xx-large.

6. In the font-variant box, enter or select small-caps.

7. Click OK.

8. To see the style rule that was created, switch to Source view and scroll to the style element, which is located inside the head element.

   You can see that the CSS style rule that was created for the h1 element.

9. Use the following steps to style the h2 element on the banner in a similar way:

   1. Put the pointer in the heading that reads "Making CSS Styling Easier in Design View", which is an h2 element.

   2. Open the New Style dialog box as in step 2.

   3. Select the h2 element.

   4. Set the Selector value in the New Style box to h2.

   5. Set the font-family to comic Sans MS and set the font size to small.

   6. Click OK.

Selecting Page Elements

In Visual Studio, there are several ways to select elements on the page. You can use the quick tag selector, which is in the lower section of the Design view pane. When you put the insertion point anywhere on a page, the quick tag selector displays a tag that shows the underlying HTML for that area. Tags that contain the current tag appear to the left of the tag in the quick tag selector bar. For example, if the insertion point is in a table cell, the td tag appears in the quick tag selector bar, and is preceded by a tr tag for the table row, and a table tag for the table.

When you move the pointer over a tag in the quick tag selector, the tag's content is highlighted in Design view and an arrow appears on the tag. You can click this arrow to select a tag and its content, or to select only the content of the tag.

You can also use the ESC key to go up the hierarchy of elements. For example, the h1 element is nested inside the div element of the banner. To select the entire div element, click the h1 element to select it, and then use the ESC key to select the banner div element. Note that the first time you press the ESC key, it highlights the h1 element and shows the padding and margins of the element. (Because you did not explicitly set these, their values are the default settings.) When you press the ESC key again, the entire div element is selected. When the element is selected, the tag displays div#banner.

Sizing the Banner and Positioning Its Contents

You can size and position the banner and its contents in Design view by using the Direct Style Application toolbar. The style rules are written to the current page, which is the same location where the previous style rules were written.

To size the banner

1. Switch to Design view.

2. Click the h1 text ("AdventureWorks Styling Page") to select it, and then press the ESC key two times to select the enclosing element, which is the div element that is named banner.

3. Drag the resize handle on the lower-right corner to resize the banner div element.

   Notice that as you drag, a tooltip shows the width and height values. These values are also shown in the status bar, which is in the lower section of the Design view window.

4. Resize the element until it is about 780 pixels wide and about 125 pixels high.

5. To see the style rule that was created, go to Split view and scroll to the style element.

   You can see that a style rule was created for the banner div element **(**using the #banner selector).

6. In Design view, make sure that the banner div element is selected (div#banner should still be selected in the tag navigator)

7. In the Format menu, click Borders and Shading.

   The Borders and Shading dialog box is displayed.

   Select the Shading tab, select the Background color, and then click More Colors.

   The More Colors dialog box is displayed.

8. Select a background color for the banner, and then click OK.

   In Split view, you can see that the #banner style rule is updated to include a setting for background-color.

9. To adjust the width of the form to match the banner, select the form element and drag the resize handle on the right side to resize the form to 780 pixels wide.

You can also apply style rules that center the text in the headings. You can do this by setting padding values.

To position the heading elements inside the banner

1. In Design view, select the banner h1 element.

2. On the Format menu, click Paragraph.

   The Paragraph dialog box is displayed.

3. In the Paragraph box, in the Alignment drop-down list, select Center and then click OK.

4. Select the h2 element, and then repeat steps 2 and 3.

To complete the banner, you must position the search div element and its elements on the banner. You can use another feature of Visual Studio, the positioning grid, to accomplish this.

To position the search div element inside the banner

1. In Design view, select the search div element (div#search).

2. On the Format menu, click Set Position, and then select Absolute.

3. Drag the search div element by its tab (the text reads div#search) to a position that is inside the banner but to the right of the text elements.

   Notice that two blue lines extend from the selection, which indicate a top and a left positioning value.

4. Release the search div element when you have it positioned where you want it.

Creating a Flexible Three-Column Layout

You can use Visual Studio to create style rules by formatting page elements in Design view. You can also use these same tools to create your page layout.

In this walkthrough, you will create a three-column layout by using the float style rule. First, you will set the size and position of the left and right sidebars, and then you can adjust the padding on the main content section to create a flexible three-column layout.

Creating the Sidebar Columns

You can resize the side columns in the page layout in the same way that you resized the banner. When you resize the sidebar columns, you want to set only the width value, not the height value, so that the text can extend the length of the column if necessary. To set only the width of the div element, you can drag the right side of the div element instead of grabbing from the corner of the div element, as in the previous procedure.

To resize and position the left and right sidebar div elements

1. In Design view, select the left sidebar div element. (You can do this by selection div.column#leftsidebar in the tag navigator.)

2. Drag the right edge of the left sidebar div element to resize the element until it about 200 pixels wide.

   Notice that as you drag, the value for height is shown in parentheses, which indicates that it is not being set.

3. In the Format menu, click Position.

   The Position dialog box is displayed.

4. Under Wrapping style, select Left and then click OK.

5. Select the right sidebar div element, and drag its right edge until the width is about 290 pixels.

6. On the Format menu, click Position.

7. Under Wrapping style, click Right and then click OK.

Creating the Center Column

To create the center column, you can set margins and padding to move the content away from the left and right columns. You will first create a left border, and then use padding to move the content away from the border.

To style the center column

1. In Design view, select the main content div element.

2. While holding down the CTRL key, drag the right margin of the main content div element to set the right margin to 290 pixels. Drag the left margin to a value of 210 pixels.

   If you have trouble making these settings by dragging the border of the div element, you can use Source view or Split view to create the following style rule:

   #maincontent
   {
       margin-right: 290px;
       margin-left: 210px;
   }
   

3. Select the main content div element, and then in the Format menu, click Borders and Shading.

   The Borders and Shading dialog box is displayed.

4. Under Settings, select Custom.

5. In the Style list, select Solid, and under Preview, click both the left and right border buttons.

6. In the Width text box, enter 1px.

7. Under Padding, in both the Left and Right boxes, enter 10px.

8. Click OK.

   In Source view or Split view, notice that the style definition for the #maincontent element has been updated.

Adjusting the Footer

If users resize the page or if the page is displayed on a large-format monitor, the footer might wrap and appear at the edge of one of the columns. To prevent this, you can set the clear style rule.

To adjust the footer div element

1. In Design view, select the footer div element.

2. On the Format menu, click New Style.

   The New Style dialog box is displayed.

3. In the Selector box, enter or select #footer.

4. In the Category list, click Layout.

5. In the clear list, select both.

6. Click OK.

Creating and Using a Style Sheet

So far in this walkthrough, you have created style definitions by manipulating elements directly in the page and saving the settings in a style element that is in the head element of the page. The style settings you have created apply only to the current page.

An efficient way to work with CSS is to put style rules in a style sheet. The styles can then be referenced by all pages. To create a style sheet, you use the same techniques that you use to create a new page.

To create a style sheet and attach it to a page

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

2. In the list of templates, select Style Sheet.

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

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

4. Open or switch to the Default.aspx page and switch to Design view.

5. In the View menu, click Manage Styles.

   The Manage Styles window is opened. (By default, this window is docked.)

6. In the toolbar of the Manage Styles window, click the Attach Style Sheet button.

   The Select Style Sheet dialog box is displayed.

7. Select the Layout.css file, and then click OK.

   A new tab named Layout.css is created in the Manage Styles window. This indicates that the Layout.css file is attached to the current document. In Source or Split view, you can see that a link element like the following one is added to the head element of the page:

   <link href="Layout.css" rel="stylesheet" type="text/css" />
   

   This illustrates how you can use the Manage Styles window to assign a style sheet to a page. There are other ways you can assign a style sheet to a page as well. For example, you can also drag the file from Solution Explorer to the head element of the page in Source view, or drag the file from Solution Explorer and drop it anywhere on the page in Design view.

Moving Style Rules from a Page to a Style Sheet

You can use the Manage Styles pane to move styles from one page to another, or to see how style rules are applied on a page. You can now move the style rules you have defined to the new style sheet that you just created.

To move style rules by using the Manage Style pane

1. Switch to the Default.aspx page.

2. Switch to Design view.

3. In the Current Page tab of the Manage Styles window, select all the styles. (You can select them by using SHIFT+CLICK.)

4. Drag the selected styles to the Layout.css tab of the Manage Styles window.

   The style rules are removed from the Default.aspx page and moved to the Layout.css file. You can confirm this by viewing the Default.aspx page in Source view and by switching to the Layout.css page in the editor.

You can also change the order of the styles in the style sheet by using the Manage Styles window.

Next Steps

This walkthrough has 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 in which you can control the appearance of the Web pages:

• Working with an existing style sheet. For more information, see Walkthrough: Working with an Existing 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 details, see ASP.NET Themes and Skins and ASP.NET Themes and Skins.

See Also

Tasks

Walkthrough: Creating a Basic Web Page in Visual Studio

Concepts

Types of Web Site Projects in Visual Studio