1. Open Visual Web Developer.

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

   The New Web Site dialog box appears.

3. In the Language list, click the programming language that you prefer to work in.

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

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

5. In the right-most Location box, type the name of the folder where you want to keep the pages of the Web site.

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

6. Click OK.

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

The next step is to add some controls to the page. The code will be simple, but enough to let you add breakpoints later.

To add controls

1. Switch to Design view.

2. Right-click CaptionLabel, and then click Style.

   The Style Builder dialog box appears.

   The Style Builder helps you set style information by organizing style information into logical categories and offering you appropriate values and options for each style setting.

3. Click Font, click Family, and then click the ellipsis (...) that is located to the right of the text box.

   The Font Picker dialog box appears.

   Under Installed fonts, click Arial, and then click add (>>).

   Arial appears under Selected fonts.

4. Repeat the preceding step to add Times New Roman and Verdana to the list of selected fonts, and then click OK.

   When you return to the Style Builder dialog box, the three font names are in the Family box. You have created the list of fonts that will be used to render the contents of the Label control in order of preference.

5. Under Size, click Specific, in the box, type 1.2, and then in the list, enter em.

   By setting the size to 1.2 ems, you are indicating that the text will appear 1.2 times larger than the current font size setting in the user's browser. At the bottom of the dialog box, you can see a preview of what the text will look similar to.

6. Click Background, click the ellipsis (…) that is located to the right of the Color box, and in the Color Picker dialog box, click a color.

7. Click OK to close the Style Builder dialog box.

   The text in the label now reflects the style settings that you made.

1. Switch to Source view.

   The <asp:label> element for the CaptionLabel control now has a style attribute that reflects the settings that you made in the Style Builder.

2. Position the insertion pointer on a space in the <asp:button> element, and then type style=.

   Note
   The editor always puts quotation marks around the style attribute, regardless of the formatting options that you have set. For more information, see Walkthrough: Advanced HTML Editing in Visual Web Developer.

3. Double-click background-color, and then type a colon (:).

   Microsoft IntelliSense functionality displays a list of color names. A ToolTip displays the syntax for the background-color style setting.

4. Double-click Blue, type a semicolon (;), which is the delimiter between style settings, and then press SPACEBAR to display IntelliSense functionality.

5. Double-click color, type a colon (:), and then double-click a contrasting color, such as Yellow or White.

6. To see the effect of your choices, switch to Design view.

1. In Solution Explorer, right-click the name of the Web site (for example, C:\WebSites), and then click Add New Item.

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

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

   The editor opens with a new style sheet that contains a body style element.

4. Position the insertion pointer between the opening and closing braces ({ }), and then on the Styles menu, click Build Style.

   The Style Builder - body dialog box appears.

5. Click Font, under Font Attributes, click the ellipsis (…) that is located to the right Color box, in the Color Picker dialog box, click a light color, and then click OK.

   Note
   Be sure to select a color that is different from the default color of the pages in the Web site.

6. Click Background, click a dark color, such as Maroon, that contrasts with the font color you selected in the preceding step, and then click OK to close the Style Builder- body dialog box.

7. Position the insertion pointer after the closing brace of the body element, right-click, and then click Add Style Rule.

   The Add Style Rule dialog box appears.

   The Add Style Rule dialog box lets you create new styles that are bound to a particular HTML element type, to a style class name, or to a specific element.

8. Click Class name, and then in the box, type reverse.

   This will create a new style class named reverse. You will be able to apply the style settings that you defined for the reverse class to any element on your page. You could optionally create the class so that it applies to only specific types of elements (anchors, buttons, and so on), but in this walkthrough you will create a simple style class.

9. Click OK to close the Add Style Rule dialog box.

10. Use the style builder or IntelliSense functionality to set the colors for the reverse style to the opposite of the styles for the body. The element will look similar to the following:

    .reverse 
    {
     background-color:white; 
     color:maroon;
    }

1. Open Default.aspx page and switch to Design view.

2. From Solution Explorer, drag the dark.css file onto the page.

   The page is updated, displaying the effect of the style sheet.

3. Click ResultLabel, and then in Properties, set CssClass reverse.

   This applies the reverse style to ResultLabel.

4. Switch to Source view.

   In the <head> element, you can see that the editor has added a <link> element that references the style sheet. You can also see that the cssclass attribute of the second <asp:label> element has been set to reverse.

5. Right-click the page, and then click View in Browser.

   The page appears in the browser with the style sheet applied.

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

2. Under Visual Studio installed templates, click Style Sheet, in the Name box, type light.css, and then click Add.

3. In the new style sheet, use the Style Builder or IntelliSense functionality to create the following styles:

   body 
   { 
    background-color:white; 
    color:Black; 
   }
   .reverse 
   { 
    background-color:Black;
    color:White;
     }

4. Save the new style sheet.

1. Open the Default.aspx page and switch to Source view.

2. In the <link> element, which is in the <head> element, add the attribute ID="stylesheet".

   The tag will look similar to the following:

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

   Adding these two attributes makes the <link> element a server control that you can program using server-based code.

3. Switch to Design view, and then from the Standard group in the Toolbox, drag two RadioButton controls onto the page.

   Note
   The layout of the RadioButton controls is not important for this walkthrough.

4. Set the following properties for the RadioButton controls.

   Control	Properties
   RadioButton1	ID: radioDark AutoPostBack: true Checked: true GroupName: grpSelectStylesheet Text: Dark
   RadioButton2	ID: radioLight AutoPostBack: true Checked: false GroupName: grpSelectStylesheet Text: Light

5. Click radioDark and on the Properties toolbar, click the events icon to display available events.

6. In the CheckedChanged box, type SwitchStylesheets, and then press ENTER.

   The editor creates a handler for the CheckedChanged event of the radioDark control.

7. Type or copy the following code, which switches the Href attribute of the <link>.

   Visual Basic

   Protected Sub SwitchStylesheets(ByVal sender As Object, _
            ByVal e As System.EventArgs) Handles radioDark.CheckedChanged
       If radioDark.Checked Then
           stylesheet.Href = "dark.css"
       ElseIf radioLight.Checked Then
         stylesheet.Href = "light.css"
      End If
   End Sub
   

   C#

   protected void SwitchStylesheets(Object sender, EventArgs e)
   {
       if (radioDark.Checked)
           stylesheet.Href = "dark.css";
       if (radioLight.Checked)
         stylesheet.Href = "light.css";
   }
   

   The code determines which option button is selected and sets the Href attribute of the <link> element, which you named stylesheet, appropriately.

8. Switch to Design view.

9. Click radioLight, and in Properties, click the events icon.

10. In the CheckedChanged box, click SwitchStylesheets.

    This binds the CheckedChanged event of the radioLight control to the handler that you have already written to switch style sheets. Both radio buttons will call the same handler when they are clicked.

1. Press Ctrl+F5 to run the page.

2. Click Light.

   The appearance of the page changes.

3. Click Dark to make sure that both option buttons work.