Move Style Attributes to CSS (ASP.NET)

Moves style attributes from the active control to a new CSS class, and applies the class to the control.

Purpose

If you use a server control, its style settings can be defined via numerous separate attributes. By moving all style settings to a single CSS class, you make your code easier to read and make it possible to re-use the extracted style settings.

Availability

Available from the context menu or via shortcuts:

  • when the caret is within a server control that has at least a single style attribute assigned.

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 CssClass attribute.
  • Right after Move Style Attributes to CSS (ASP.NET), Rename is activated, so you can provide a meaningful style name.

Example

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ExtractStyle.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">
        <asp:Button BorderColor="ActiveBorder" runat="server"/>
    </form>
</body>
</html>

Result:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ExtractStyle.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">
        .ButtonStyle1
        {
            border-color: ActiveBorder;
        }
    </style>
    <title>My Page</title>
</head>
<body>
    <form id="Form1" runat="server">
        <asp:Button CssClass="ButtonStyle1" runat="server"/>
    </form>
</body>
</html>

Screenshot

rsMoveStyleAttributesToCSS