Extract Style - Class (ASP.NET)
- 2 minutes to read
Extracts inline style settings into a named style and references that style via the class attribute.
#Purpose
Sometimes you need to apply a particular element’s style to other elements. In such instances, the best solution is to extract the needed style settings into a separate named style and refer to this style fo every element that uses it. This will allow you to have centralized control over style settings - any changes to the extracted style will be immediately reflected by all bound elements.
Use Extract Style - Class (ASP.NET) to automatically convert inline style settings into a named style that can be referred by any element on the page.
#Availability
Available from the context menu or via shortcuts:
- when the caret is anywhere in an element’s style attribute, or when the entire style attribute is selected.
Note: this refactoring is not available for elements that are within <asp:content> tags.
#Notes
- The extracted style settings are used to create a new named style. The created style is declared in the head section within the <style> tags. These tags are created automatically, if needed.
- A reference to the newly declared style is inserted at the extraction point. The element refers to the style via the class attribute.
- Right after Extract Style - Class (ASP.NET), Rename is activated, so you can select a meaningful style name.
#Example
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ExtractStyleClass.aspx.cs" Inherits="ExtractStyleClass" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>My Page</title>
</head>
<body>
<form id="Form1" runat="server">
<div style="color:blue; background-color:Gray; font-size:x-large"></div>
</form>
</body>
</html>
Result:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ExtractStyleClass.aspx.cs" Inherits="ExtractStyleClass" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
div.divStyle1
{
color: blue;
background-color: Gray;
font-size: x-large;
}
</style>
<title>My Page</title>
</head>
<body>
<form id="Form1" runat="server">
<div class="divStyle1"></div>
</form>
</body>
</html>
#Screenshot
