Extract Style - Class (ASP.NET)

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

rsExtractStyleClassASP