How to add a CSS style sheet reference to all Web forms in a Visual C# .NET Web project


Summary


This step-by-step article describes how to create a custom Web Form template so that you can include a cascading style sheet (CSS) reference in all Web Forms in a Visual C# .NET Web project.

Typically, Web site designers must maintain a consistent look-and-feel on every page for a particular Web site. This article describes how to create a custom Web Form template that contains a link to a CSS style sheet. When you create all Web Forms in an application with this template, you provide an easy way to maintain a consistent design across the site.

The technique that is described in this article is based on the concept of Microsoft Visual Studio .NET Enterprise Templates. For more information, see the "REFERENCES" section of this article.

back to the top

Edit WebProjectItems.vsdir file

  1. In Notepad, open the WebProjectItems.vsdir file from the following folder:
    In Visual Studio .NET 2002:
    C:\Program Files\Microsoft Visual Studio .NET\VC#\CSharpProjectItems\WebProjectItems

    In Visual Studio .NET 2003:
    C:\Program Files\Microsoft Visual Studio .NET 2003\VC#\CSharpProjectItems\WebProjectItems
  2. Add the following text to the end of the file:
    ..\MyCustomWebFormWiz.vsz|{FAE04EC1-301F-11d3-BF4B-00C04F79EFBC}|My Custom
    Form|10|#2263|{FAE04EC1-301F-11d3-BF4B-00C04F79EFBC}|4534|0|WebForm.aspx
  3. Save the file.
back to the top

Create custom Web form wizard

  1. Open the following folder:
    In Visual Studio .NET 2002:
    C:\Program Files\Microsoft Visual Studio .NET\VC#\CSharpProjectItems

    In Visual Studio .NET 2003:
    C:\Program Files\Microsoft Visual Studio .NET 2003\VC#\CSharpProjectItems
  2. Copy the CSharpAddWebFormWiz.vsz file to the MyCustomWebFormWiz.vsz file.
  3. In Notepad, open the MyCustomWebFormWiz.vsz file, and then change the Param value as follows:
    Param="WIZARD_NAME = MyCustomWebFormWiz"
  4. Save the file.
back to the top

Create custom Web form template

  1. Open the following folder:
    In Visual Studio .NET 2002:
    C:\Program Files\Microsoft Visual Studio .NET\VC#\VC#Wizards

    In Visual Studio .NET 2003:
    C:\Program Files\Microsoft Visual Studio .NET 2003\VC#\VC#Wizards
  2. Copy CSharpAddWebFormWiz to a new directory that is named MyCustomWebFormWiz.
  3. Open the following folder:
    In Visual Studio .NET 2002:
    C:\Program Files\Microsoft Visual Studio .NET\VC#\VC#Wizards\MyCustomWebFormWiz\Templates\1033

    In Visual Studio .NET 2003:
    C:\Program Files\Microsoft Visual Studio .NET 2003\VC#\VC#Wizards\MyCustomWebFormWiz\Templates\1033
  4. In Notepad, open the WebForm1.aspx file, and then add the following link reference (which appears indented) between the <meta name=vs_targetSchema> tag and the closing <head> tag as follows:
    <meta name=vs_targetSchema content="[!output DEFAULT_TARGET_SCHEMA]">
    <link id="link1" rel="stylesheet" href="myStyleSheet.css" type="text/css" runat="server" />
    </head>
  5. Save the file.
back to the top

Test link reference

  1. Start Microsoft Visual Studio .NET.
  2. On the File menu, point to New, and then click Project.
  3. Click Visual C# Projects under Project Types, and then click ASP.NET Web Application under Templates.
  4. On the Project menu, click Add New Item to add a style sheet to the project, and then name the style sheet myStyleSheet.css.
  5. Set the background color of the body element to blue for testing purposes.
  6. On the Project menu, click Add New Item.
  7. Click My Custom Form under Templates, name the file, and then click Open to add a custom Web Form to the application. Notice that the style sheet is applied automatically to the new Web Form and that the background is blue.
back to the top

References


For more information about Visual Studio .NET Enterprise Templates, visit the following Microsoft Web site: back to the top