Post
Ask Question

Attach CSS, Change CSS And Style In ASP.NET

Change CSS Example

css

Above image default CLASS attached is LabelBlue On Button Change CSS Class click event changed CLASS is LabelGrey.

Command: Check code for detail,

lblMessage.CssClass = "LabelGrey";

Result After Clicked Button

css

Change Style Example

style

Above image by default there is no CLASS and STYLE attached with text On Button Change Style On Click on click event changed.

Command: Check code for detail,

lblWithoutStyle.Style.Add("font-size", "50px");

Result After Clicked Button

style

Attached CSS Example

default

Above image default  no CLASS is attached On Button Class Attached on Click click event attached CLASS ClassJoined.

Command: Check code for detail,

lblWithoutClass.Attributes.Add("class", "ClassJoined");

Result After Clicked Button

default

ASPX Page Code:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ChangeCSSClass.aspx.cs" Inherits="ChangeCSSClass" %>    
  2.     
  3.     <!DOCTYPE html>    
  4.     
  5.     <html xmlns="http://www.w3.org/1999/xhtml">    
  6.     
  7.     <head runat="server">    
  8.         <style>    
  9.             .LabelGrey     
  10.             {    
  11.                 font-weight: bold;    
  12.                 color: darkgray;    
  13.             }    
  14.                 
  15.             .LabelBlue     
  16.             {    
  17.                 font-weight: normal;    
  18.                 color: darkblue;    
  19.             }    
  20.                 
  21.             .ClassJoined     
  22.             {    
  23.                 font-weight: normal;    
  24.                 font-size: 50px;    
  25.                 color: darkcyan;    
  26.             }    
  27.         </style>    
  28.         <title></title>    
  29.     </head>    
  30.     
  31.     <body>    
  32.         <form id="form1" runat="server">    
  33.             <div>    
  34.                 <asp:Label ID="lblMessage" runat="server" Font-Size="25px" Text="Hello, CSharpCorner Users" CssClass="LabelBlue"></asp:Label>    
  35.                 <br />    
  36.                 <asp:Button ID="btnChangeCSS" runat="server" Text="Change CSS Class" OnClick="btnChangeCSS_Click" />    
  37.                 <br />    
  38.                 <br />    
  39.                 <asp:Label ID="lblWithoutStyle" runat="server" Text="Text without any style" />    
  40.                 <br />    
  41.                 <asp:Button ID="btnChangeStyle" runat="server" Text="Change Style on Click" OnClick="btnChangeStyle_Click" />    
  42.                 <br />    
  43.                 <br />    
  44.                 <asp:Label ID="lblWithoutClass" runat="server" Text="Text without any default class" />    
  45.                 <br />    
  46.                 <asp:Button ID="btnWithoutClass" runat="server" Text="Class Attached on Click" OnClick="btnWithoutClass_Click" />    
  47.             </div>    
  48.         </form>    
  49.     </body>    
  50.     
  51.     </html>  
Code Behind .cs File
  1. using System;    
  2. using System.Collections.Generic;    
  3. using System.Linq;    
  4. using System.Web;    
  5. using System.Web.UI;    
  6. using System.Web.UI.WebControls;    
  7.     
  8. public partial class ChangeCSSClass: System.Web.UI.Page     
  9. {    
  10.     protected void Page_Load(object sender, EventArgs e)     
  11.     {    
  12.     
  13.     }    
  14.     protected void btnChangeCSS_Click(object sender, EventArgs e)     
  15.     {    
  16.         lblMessage.CssClass = "LabelGrey";    
  17.     }    
  18.     protected void btnChangeStyle_Click(object sender, EventArgs e)     
  19.     {    
  20.         lblWithoutStyle.Text = "Text with Style";    
  21.         lblWithoutStyle.Style.Add("font-size", "50px");    
  22.     }    
  23.     
  24.     
  25.     protected void btnWithoutClass_Click(object sender, EventArgs e)     
  26.     {    
  27.         lblWithoutClass.Attributes.Add("class", "ClassJoined");    
  28.     }    
  29. } 

 


Similar Articles