How to use Visual Studio 2010 to apply stylesheet rules in ASP.NET

The article: How to apply stylesheet rules in ASP.NET shows that you should add a <link> element (which includes stylesheet file) in the <head> section of your web page.  You can do the same by using Visual Studio by dragging your stylesheet from the Solution Explorer and dropping it onto the design surface of the page (or the <head> section in source view).

You can apply style by using Visual Studio’s Apply Styles window. You can see the Apply Styles windows by opening a web page and choosing View ➤ Apply Styles.  The Apply Styles window appears on the left with the Toolbox and Server Explorer. This window shows a list of all the styles that are available in the attached stylesheets, along with a preview of each one. To apply a style, simply select an element on your web page and then click the appropriate style in the Apply Styles window. Visual Studio applies a style based on what you’ve selected in your web page:

–  If you select a web control, it adds or changes the CssClass property.

–  If you select an ordinary HTML element, it adds or changes the class attribute.

–  If you select a section of HTML content, it adds a <span> or <div> element (depending on the type of content you’ve selected) and then sets its class attribute.

Visual Studio provides additional ways to manage styles:

The Manage Styles window: This window gives you an at-a-glance overview of all the styles that are in scope in the current web page, in a single list. To show it, open a web page and choose View ➤ Manage Styles. Using this window, you can view the style definition (hover over a style), edit it (right-click the style and choose Go To Code), or design it with the style builder (right-click the style and choose Modify).

The Style Sheet toolbar: This toolbar is useful when designing a stylesheet, and provides buttons for modifying an existing style or adding a new style. To show this toolbar, right-click the toolbar strip and add a check mark next to Style Sheet.

The CSS Properties window: This window allows you to examine a style in detail and modify its formatting properties. To use it, choose View ➤ CSS Properties. Then, select find an element that has a style, and select it on the design surface of your web page. The CSS Properties window will show a detailed, sub-grouped list of all the CSS style properties, which looks similar to the list of web control properties in the Properties window.