Introduction
Visual Studio (VS) has several tools which help Web
developers to create, modify, apply, and manage cascading style
sheet (CSS) rules and properties.
The CSS
Editor aides the coding process by providing IntelliSense support with the ability to use
shortcuts to find property names, a color picker which writes rgb, rgba,
and hexadecimal values when a color is chosen using one of the color picker's
many methods, and coding
snippets which include vendor-specific CSS properties.
The New
Style and Modify Style windows give Web
developers a form-based method for configuring CSS properties when
creating new or
modifying existing CSS rules respectively.
The Apply Styles and Manage
Styles windows do exactly what their names imply by helping you
to visually select styles to apply to HTML elements and manage
all of your CSS rules inline, embedded, and attached style sheets.
The CSS Editor
When typing in Source View of the
Document window
you can quickly add color to an element using the plethora of tools
available in the CSS Editor's Color Picker tool as shown in figure 1.
Figure 1: Dissecting the Color Picker tool available in Visual Studio's CSS Editor.
New & Modify Style Dialog boxes
Figure 4: The New Style button.
Figure 3: The New Style option.
Here are two of the most common ways to create a
new style: 1) you can click on the Format menu and choose New
Style... as shown in figure 3, or 2) you can create a new style by clicking on the
New Style button (see figure 4) in either the Apply
Styles window or the Manage Styles window.
Once you have clicked the button the New Style
dialog box appears. The layout of the New Style dialog
box is arranged into five sections, 1) the information
section at the top, 2) the Category list on the left
underneath the information section, 3) the
properties panel to the right of the Category
list, 4) the Preview section under properties and Category, and 5) the
Description section at the very bottom.
The information area has four options, two
of which must always be set, 1) the Selector and 2) Define in. The
Selector drop-down list is where you choose or type in
the selector that will be used to link the new style to one or more HTML elements. Any valid
selector type will work here, class, id, type, pseudo-class, etc. The
Define in drop-down list is used to either embed the
new style code in the active HTML document or Web form, or to select a
style sheet location of where to store the new style code, either a new
style sheet or an existing style sheet. There are three options to
choose from: 1) you can choose to embed the code for the new style in
the head section of the active document by selecting Current
Page, or 2) add the new style code to a new style sheet by
choosing New style sheet, or 3) add the new style code to
an existing style sheet by selecting Existing style sheet.
The Category column under the information section on the left organizes all of the CSS properties by categorical groupings. The properties that appear on the right will change each time you select a different category.
The Preview section attempts to show what your new style will look like when applied to an HTML element.
The Description section shows you what the actual CSS code in the declaration portion of the CSS rule will look like.
Once you have modified or configured a new CSS rule you can click the Apply button at the bottom of the dialog box; this will create a new or update and existing style as well as apply the style according to the selector and keep the style dialog box open so that you can make any changes if needed. If you click the OK button the style is created or updated, then applied, and the dialog box closes.
Figure
5: Creating a new style using the
Visual Studio New Style dialog box.
Apply & Manage Styles
Figure 6: The Apply Styles window.
When working in a document that has been linked to a stylesheet with existing CSS rules you can apply those styles to your document's content by using the ApplyStyle window. If you want to make changes to existing styles you can use the Manage Styles window.
Apply Styles Window
To open the Apply Styles window, click on the View menu and then choose Apply Styles from the list of options.
The default positioning for the Apply Styles window is to align to the left of the Document window. When the Push Pin on the titlebar for the Apply Styles window is pointing downward the window will remain open while you edit your document. If the Push Pin icon is pointing to the left then the Apply Styles window will auto hide and become a tab on the left of the Document window while you are working on the document. To change the state of the Push Pin icon from open to auto hide or auto hide to open, just click on the Push Pin icon; it will change its state each time it is clicked.
To apply a style to content in your HTML document, select the text or HTML element you want to apply a style to in the Design view of the Document window (Apply Styles window will not work in Source view) then click on the CSS rule you want applied to the selected item in the Apply Styles window.
To edit an existing style, right-click on the style item in the Apply Styles window and choose Modify Style from the list of options that appear.
Manage Styles Window
Figure 7: The Manage Styles window.
To open the Manage Styles window, click on the View menu and then choose Manage Styles from the list of options.
The default positioning for the Manage Styles window is to align to the left of the Document window. When the Push Pin on the titlebar for the Manage Styles window is pointing downward the window will remain open while you edit your document. If the Push Pin icon is pointing to the left then the Manage Styles window will auto hide and become a tab on the left of the Document window while you are working on the document. To change the state of the Push Pin icon from open to auto hide or auto hide to open, just click on the Push Pin icon; it will change its state each time it is clicked.
A green check beside a CSS rule in the Manage Styles window indicates that the style is in use in the document you have open. To edit an existing style right-click on the CSS rule name in the Manage Styles window and choose Modify Style from the list of options that appear.
You cannot apply CSS rules listed in the Manage Styles window to the content of your open document, but you can delete an existing rule from the stylesheet by right-clicking on the CSS rule name and choosing Delete from the list of options that appear.