|
Style Builder Topic updated 12-3-2007 |
|
The Style Builder is a dialog that can be opened from the WebForm Designer to apply inline CSS (Cascading Style Sheets) to controls and to custom HTML code in User Codeblocks. Using CSS, text can be formatted in more sophisticated ways then is possible with the basic formatting options provided by the HTML Commands.
Opening the Style Builder Generally, the Style Builder is opened by right-clicking an element in the WebForm Designer, and choosing Edit Style from the context menu. Both controls and HTML elements have this context menu option in the WebForm Designer.
When text added to a page as custom HTML code is right-clicked, the menu option will show for which element the Style Builder will be opened. In this example the whole paragraph element would be formatted by the Style Builder:
In the next example the emphasized (italic) word is right-clicked, and only this word would be formatted by the Style Builder.
The Style Builder does not add SPAN or DIV elements to the HTML to apply styles to. If you make a selection in the WebForm Designer which does not match an underlying HTML tag, the nearest tag is taken and shown in the Edit <tagname> Style option in the context menu.
Previewing and applying styles The Style Builder dialog consists of multiple tabs that cover various styling aspects. When the dialog is opened it loads and displays the style settings of the element being edited. You can configure the style using all available options on all tabs of the dialog.
By default, the effect of your settings is previewed in the WebForm Designer while you are making changes to the style settings. You can turn this behaviour of by unchecking the Preview checkbox at the bottom of the dialog. When you're finished making changes click the OK button to apply the new style. You can cancel your changes by clicking the Cancel button, the style of the element in the WebForm Designer will then be reset to how it was before the Style Builder was opened.
Removing styles You can remove styles that were added earlier by opening the Style Builder and clearing the values of style options. Options that allow only a fixed set of values can be reset by choosing <Not Set> from their dropdown lists. Some options combine a free textbox with a list of predefined options, in this case the textbox must be cleared.
See also While the Style Builder applies CSS to single controls or bits of HTML code, ASP.NET 2.0 Themes use CSS to apply styles in a centralized way. The Style Builder adds style information as custom HTML code to User Codeblocks, which can be viewed and edited with the Source Editor. CSS is a standard defined by W3C (World Wide Web Consortium).
|