Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

Walkthrough: Working with Cascading Style Sheet Styles in Visual Web Developer

Visual Studio 2005

The Visual Web Developer Web development tool gives you complete support for creating and applying styles to the text, elements, and controls on Web pages.

Tasks illustrated in this walkthrough include the following:

  • Setting inline styles for individual elements.

  • Creating a style block for a page.

  • Creating a cascading style sheet (.css file), and then applying the .css file to one or more pages in your site.

  • Changing style sheet references programmatically.

    NoteNote

    In addition to explicitly setting styles and style sheet references in a page, you can use ASP.NET themes to set the overall appearance of the pages in your site. For more information, see ASP.NET Themes and Skins Overview.

In order to complete this walkthrough, you will need the following:

  • Visual Web Developer and the .NET Framework.

  • A general understanding of working in Microsoft Visual Studio.

For an introduction to Visual Studio, see Walkthrough: Creating a Basic Web Page in Visual Web Developer.

In the first part of the walkthrough, you will create a Web site and a page where you can work with styles.

If you have already created a Web site in Visual Studio by completing Walkthrough: Creating a Basic Web Page in Visual Web Developer, you can use that Web site and go to the next section. Otherwise, create a new Web site and page by following these steps.

To create a file system Web site

  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.

Adding Controls

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. From the Standard group in the Toolbox, drag the following controls onto the page and set their properties as shown.

    1. Control

    1. Properties

    Label

    ID: CaptionLabel

    Text: (empty)

    TextBox

    ID: NumberTextbox

    Text: (empty)

    Button

    ID: SquareButton

    Text: Square

    Label

    ID: ResultLabel

    Text: (empty)

    NoteNote

    For this walkthrough, the layout of the page is not important.

You set inline styles when you want to apply formatting to a single element on the page. Visual Web Developer gives you a rich editor for editing inline styles for elements on the page. In this section of the walkthrough, you will set styles in both Design view and Source view.

To set inline styles in Design view

  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.

From these few steps, you can see that the Style Builder lets you set any inline style for any element without requiring that you know the syntax.

If you prefer working directly with HTML, you can also set styles in Source view.

To set inline styles in Source view

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

    NoteNote

    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.

Besides setting inline styles for individual elements, you can also create and apply cascading style sheet (CSS) files. A cascading style sheet lets you define styles that can be applied to multiple controls and pages without having to edit elements individually.

In this section of the walkthrough, you will create a style sheet, which lets you use the same tools that you used to set inline styles. You will then apply the style sheet to the page that you have been editing.

To create a style sheet

  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.

    NoteNote

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

Now that you have a style sheet, you can reference it in the page you have been editing.

To reference the style sheet on the Web page

  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.

Sometimes, you might want to be able to dynamically change the style sheet that is referenced by a page. In this part of the walkthrough, you will create a second style sheet, and then in your page, write several lines of code that switch style sheets programmatically.

To create a new style sheet

  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.

In your original page, you can now add the ability to switch style sheets. You will add two radio buttons that let the user select between a dark look and a light look.

To let users change style sheets

  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.

    NoteNote

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

  4. Set the following properties for the RadioButton controls.

    1. Control

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

    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
    

    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.

You can now test your page.

To test the page

  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.

This walkthrough has illustrated the basic techniques for working with CSS styles in your ASP.NET Web pages. You might also want to explore the following ways you can control the appearance of the Web pages:

Was this page helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

Show:
© 2014 Microsoft