Walkthrough: Creating and Modifying a CSS File

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

This walkthrough illustrates the following tasks:

• Creating a file system website.

• Customizing the website by using the CSS-oriented features.

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

Prerequisites

To complete the walkthrough, you need the following:

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

Creating a Website

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

If you have already created a website (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 and Styling Page Elements" later in this walkthrough. Otherwise, create a website by following these steps.

To create a file system website

1. Open Visual Studio or Visual Studio Express for Web.

2. In the File menu, click New Website.

   The New Website dialog box is displayed.

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

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

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

5. Click OK.

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

6. In Solution Explorer, right-click the name of the website, choose Add, and then choose 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

This section provides you with a set of page elements that you modify with the Visual Studio formatting and styling tools. 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 copy page elements that you 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.

2. Switch to Source view.

3. Inside the <form> section, remove the empty <div></div> tag pair 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> section 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 website.

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

Formatting a Page Banner

The first element to format is the banner section, which includes elements enclosed in the <div ID="banner"> tag. In this example, you use the New Style dialog box to change the styling and position of the heading. You 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 Formatting toolbar, in the Target Rule list, click Apply New Style. Alternatively, on the Format menu, choose New Style.

   Tip

   The Formatting toolbar is enabled by default. To enable it, in the View menu, choose Toolbars, and then choose Formatting.

   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. Current page indicates that the style rule is created in a style element on the page that you are currently editing.

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

   The font is previewed in the Preview pane.

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. In Design view, 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. Set the Selector value in the New Style box to h2.

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

   5. 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 located along the bottom 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, a table tag and a tr tag appear before the td tag.

When you move the pointer over a tag in the quick tag selector, 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. The first time you press the ESC key, it highlights the h1 element and shows the padding and margins of the element. 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 Formatting 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 twice. This action selects 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 lower left corner of the status bar at the bottom 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. Switch to Design view.

7. Make sure that the banner div element is selected (div#banner should still be selected in the tag navigator)

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

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

10. To adjust the width of the form to match the banner, select the form element. Then, drag the resize handle on the right side to reduce the width of the form to 780 pixels.

You can also apply style rules that center the text in the headings 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 position the search div element and its elements on the banner by using the positioning grid.

To position the search div element inside the banner

1. In Design view, select the search div element (div#search). (This element at the top of the page contains the search box.)

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

3. Drag the div#search element by its tab 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 positioned and resized it the way 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 create a three-column layout by using the float style rule. First, you set the size and position of the left and right sidebars. Then, you 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. When you do not specify a height value, 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.

To resize and position the left and right sidebar div elements

1. In Split view, select the left sidebar div element in the HTML Source code.

2. Drag the right edge of the left sidebar div element to the left to resize it until it is 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 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 or Split view, select the div element for the main content.

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

   Alternatively, you can use Source view or Split view to create the following style rule:

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

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

   The Borders and Shading dialog box is displayed.

4. Under Setting, 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, choose 1.

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

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 appear at the edge of one of the columns. To prevent this wrapping behavior, 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, you have created style definitions by manipulating elements directly in the page. You have saved the style definitions in the style element inside the head element of the page. These style settings apply only to the current page.

An efficient way to work with CSS is to put style rules in a style sheet that all your web pages can refer to. To create a style sheet, you use the same techniques that you use to create a page.

To create a style sheet and attach it to a page

1. In Solution Explorer, right-click the name of the website, click Add, 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. 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 a style sheet file from Solution Explorer to the head element of the page in Source view. You can also 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 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 Manage Styles window, in the Current Page section, select all the styles. (If you select the first style, and then use SHIFT+CLICK to select the last style, all the styles will be selected.)

4. Within the Manage Styles window, drag the selected styles onto the body icon in the Layout.css section.

   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 can also explore the following ways to control the appearance of webpages:

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

See Also

Other Resources

Walkthrough: Creating a Basic Web Forms Page in Visual Studio

Types of Web Site Projects in Visual Studio