10: Common Elements: Style Sheets, Master Pages, and Skins in Visual Studio .NET

Encode Quick Response Code in Visual Studio .NET 10: Common Elements: Style Sheets, Master Pages, and Skins

5 In the Category box, select the Border category and then set the border properties shown in the following table: Property border-style border-width border-color Value dotted 3px red

6 In the Category box, select the Background category and then set the background-color property to yellow 7 Click OK to save the styles As shown in Figure 10-5, the name of the style (wildTextBox) takes on the wild style attributes so you can see what you re getting Nice touch!

Your outlandish new corporate style is ready for its public debut All you need is a skinny TextBox control to model your Pierre Cardin original on the virtual runway Here s how to apply the style: 1 In Design view, add an ASPNET TextBox control to your page

2 Open the Apply Styles window (View Apply Styles) 3 Select the TextBox control 4 In the Apply Styles window, click the style name (wildTextBox) The text box comes alive by adopting the bizarre style When you run the page and enter some text, you see blue letters with a charming dotted red border Be careful about what you select on the ASPNET page when you have the Apply Styles window open You can easily apply an unwanted style to the selected control or even the page If it happens to you, delete the CssClass value from the control

While you were having fun with the wild style, VWD was following good practices in the use of style sheets If you view the ASPNET page in Source view, you don t find any style markup For example, the text box markup contains only a reference to the style, as shown in bold: <asp:TextBox ID= TextBox1 runat= server CssClass= wildTextBox ></asp:TextBox> VWD inserted the formatting details into the external style sheet, StyleSheetcss: wildTextBox { border: 3px dotted #FF0000; color: blue; font-family: Comic Sans MS ; background-color: yellow; font-size: large; font-weight: bold; }

You see that style rules can live in many places: inline next to the control; embedded within the page; and stored in an external style sheet VWD helps you track all these style rules and even shift them from one location to another

Here s a typical situation: You re adding to the Web site and realize that you ve embedded styles in several pages You want to consolidate the embedded styles into one external style sheet Rather than embark on a frantic cut-and-paste blitz, follow these steps to move embedded styles to an external style sheet: 1 If your project doesn t have an external cascading style sheet, add one (File New File Style Sheet) 2 Open an ASPNET page in Design view that includes embedded style rules or insert a style such as this: <style type= text/css > rulez {font-size: xx-large;} </style> 3 Open the Manage Styles pane (View Manage Styles), as shown in Figure 10-6

4 In the Manage Styles pane, from the Current Page category, drag a style name and drop it on the name of the external style sheet (StyleSheetcss in this example) You can confirm that the style was moved by checking the ASPNET page in Source view You can move several styles by selecting the first in the list and Shift-click the last in the list The selected styles move as one

Use the Manage Styles pane to add, change, and delete styles To open the Manage Styles pane, choose View Manage Styles You can delete a style by selecting the style name and pressing the Delete key To add a style, click the New Style link To modify a style, select the style name, right-click, and select Modify Style from the context menu