Walkthrough: Creating and Modifying a CSS File
This walkthrough introduces the cascading style sheets (CSS) features in Visual Studio 2008. It guides you through creating a three-column page layout, illustrating the basic techniques of creating 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 2008 or Visual Web Developer 2008 Express Edition. For download information, see the .NET Framework Developer Center Web site.
The .NET Framework version 3.5.
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 Web Developer), 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
In Visual Web Developer, on the File menu, click New Web Site.
In The New Web Site box under Visual Studio installed templates, click ASP.NET Web Site.
In the Location box, click File System and type the name of the folder in which you want to keep the pages of your Web site.
For example, type the following folder name: C:\CSSWebSite
In the Language list, click Visual Basic or Visual C#, and then click OK.
Note
The programming language that you choose will be the default for your Web site, but you can set the programming language for each page individually.
Visual Web Developer creates the folder and a new page named Default.aspx.
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
Open or switch to the Default.aspx page.
Note
You can use any page that is available in the Web site.
Switch to Source view.
Add the following code after the <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>Save the page.
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 write the CSS 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 several ways. You can use inline styles, which are written as the style attribute of an individual element. These style rules can apply only to that element.
You can 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. Finally, you can 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 walkthrough, you will write the formatting and styling information to the page's style element section and as inline styles. Later, you can move the CSS information to an external style sheet to use other features in Visual Studio 2008.
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
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.
In the Style Application toolbar, in the Target Rule list, click Apply New Style.
The New Style dialog box is displayed.
The Direct Style Application option defaults to Manual, so you will apply the style manually.
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.
In the font-family list, select a thick font such as Impact.
In the font-size box, enter or select xx-large.
In the font-variant box, enter or select small-caps.
Click OK.
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.
Use the following steps to style the h2 element on the banner in a similar way:
Open the New Style dialog box as in step 2.
Select the h2 element,
Set the Selector value in the New Style box to h2.
Set the font-family to comic Sans MS and set the font size to small.
Selecting Page Elements
In Visual Studio 2008, 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, select only the content of the tag, edit or remove the tag, open the Quick Tag Editor dialog box, or open the Properties dialog box for an item.
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. (Since we did not set these, they 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.
Note
You can use the CTRL key and the arrow keys to change the value of size elements that have already been set. For example, if you drag the width of the banner to 785 pixels, you can use the key combination CTRL + LEFT ARROW to reduce the width to 780 pixels.
To size the banner
Switch to Design view.
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 banner div element.
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.
Resize the element until it is about 780 pixels wide and about 100 pixels high.
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).
In Design view, make sure that the banner div element is selected (div#banner should still be selected in the tag navigator)
In the Format menu, click Background Color.
The color picker is displayed.
Select a color for the banner, and then click OK.
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
In Design view, select the banner div element.
On the Format menu, click Paragraph.
The Paragraph dialog box is displayed.
Because the h1 element is the same length as the banner div, you can position the text inside the h1 element to center it in the banner area.
In the Paragraph box, in the Alignment drop-down list, select Center and then click OK.
Select the h2 element, and then repeat steps 2 and 3.
Select the banner div element.
While holding down the SHIFT key, hold the mouse pointer over the edge of the div element until a tooltip displays the current padding value.
Drag the padding edge until it is adjacent to the top border of the div element.
Drag until the two text elements are centered (about 30 pixels).
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 2008, the positioning grid, to accomplish this.
To position the search div element inside the banner
In Design view, select the search div element (div#search).
On the Format menu, click Set Position, and then select Absolute.
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.
Release the search div element when you have it positioned where you want it.
Creating a Flexible Three-Column Layout
You can use Visual Web Developer 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.
Note
To see the elements correctly positioned in Design view, you might have to hide the Toolbar. This will provide more room to show the position of the page elements.
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 example.
To resize and position the left and right sidebar div elements
In Design view, select the left sidebar div element. (You can do this by selection div.column#leftsidebar in the tag navigator.)
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.
In the Format menu, click Position.
The Position dialog box is displayed.
Under Wrapping style, select Left and then click OK.
Select the right sidebar div element, and drag its right edge until the width is about 250 pixels.
On the Format menu, click Position.
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
In Design view, select the main content div element.
While holding down the CTRL key, drag the right margin of the main content div element to set the right margin to 260 pixels. Drag the left margin to a value of 210 pixels.
While the main content div element is selected, on the Format menu, select Borders and Shading.
The Borders and Shading dialog box is displayed.
Under Settings, select Custom.
In the Style list, select Solid, and under Preview, click the left border button.
In the Width text box, enter 1px.
Under Padding, in the Left box, enter 10px.
Click OK.
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
In Design view, select the footer div element.
On the Format menu, click New Style.
The New Style dialog box is displayed.
In the Selector box, enter or select #footer.
In the Category list, click Layout.
In the clear list, select both.
Click OK.
Creating and Using a Style Sheet
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, so that they look consistent.
You can also use cascading style sheets with the ASP.NET themes. To use a style sheet with a theme, you must put it in the correct folder. For more information about themes and CSS, see ASP.NET Themes and Skins Overview.
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
In Solution Explorer, right-click the name of the Web site, and then click Add New Item.
Under Visual Studio installed templates, select Style Sheet.
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.
Open or switch to the Default.aspx page and switch to Design view.
In the Format menu, click CSS Styles, and then click Manage Styles.
The Manage Styles window is opened. (By default, this window is docked.)
Click Attach Style Sheet.
The Select Style Sheet dialog box is displayed.
Select the Layout.css file, and then click OK.
A new tab named Layout.css is created in the Manage Styles window.
You can assign a style sheet to a page in several ways. The simplest way is to drag the file from Solution Explorer to the head element of the page in Source 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.
Up to this point in the walkthrough, the style rules that you created have been saved in the style element of the Default.aspx page. You can move these style rules to the new style sheet you created.
To move style rules by using the Manage Style pane
In the Current Page tab of the Manage Styles window, select all the styles. (You can select them by using SHIFT+CLICK.)
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. For example, you can drag the search style rule so that it is directly under the banner style rule.
Next Steps
This walkthrough has illustrated 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 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 Overview.
See Also
Tasks
Walkthrough: Creating a Basic Web Page in Visual Web Developer