Extract Style - ID (ASP.NET)
- 2 minutes to read
In This Article
Extracts inline style settings into a named style, and references that style via the id attribute.
#Purpose
Use this refactoring to extract an element’s inline style settings into a standalone named style that refers to this element by its id. When all style settings are separated from elements and stored in the same place, it is easier to maintain your code.
#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 id attribute.
- If the source element has no id, it is generated automatically.
- Right after Extract Style - ID (ASP.NET), Rename is activated, so you can easily change the element’s id and its reference from the newly created style.
#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="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">
div#divStyle1
{
color: blue;
background-color: Gray;
font-size: x-large;
}
</style>
<title>My Page</title>
</head>
<body>
<form id="Form1" runat="server">
<div id="divStyle1"></div>
</form>
</body>
</html>
#Screenshot
