Post
Ask Question

Apply CSS In ASP.NET Server Controls In Real Time Scenario

Introduction

CSS means Cascading Style Sheet. The World Wide Web Consortium (W3C) created CSS. CSS describes the style of an HTML document.

CSS describes how HTML elements should be displayed.

Description

External stylesheets are stored in CSS files. CSS is used to define the styles for your Web pages, which includes the design, layout and the variations in display for the different devices and the screen sizes.

Steps
 
Part1

Create a CSS file named Styles.css.  
  1. body {  
  2.     font-family: Arial;  
  3. }  
  4.   
  5. table {  
  6.             font-family: arial, sans-serif;  
  7.             border-collapse: collapse;  
  8.             width: 70%;  
  9.       }  
  10.   
  11. .button {  
  12.     background-color: #4CAF50;   
  13.     border: none;  
  14.     color: white;  
  15.     padding: 15px 32px;  
  16.     text-align: center;  
  17.     text-decoration: none;  
  18.     display: inline-block;  
  19.     font-size: 14px;  
  20.     margin: 4px 2px;  
  21.     cursor: pointer;  
  22. }  
  23.   
  24. .button4 {border-radius: 14px;}  
  25.   
  26. .textbox {  
  27.     height: 50px;  
  28.     padding: 0 10px;  
  29.     border: none;  
  30.     background: Orange;  
  31.     background: Orange;  
  32.     box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);  
  33.     font-family: 'Montserrat', sans-serif;  
  34.     text-indent: 10px;  
  35.     color: blue;  
  36.     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);  
  37.     font-size: 20px;  
  38.     width: 470px;  
  39. }  
  40.  .textbox:focus {  
  41.     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(255, 255, 255, 0.15);  
  42.     outline: none;  
  43.     background: Orange;  
  44.     background: Orange;  
  45.     outline: solid 1px yellow;  
  46. } 
Description of Part1

To apply design and layout to ASP.NET button controls, the button background color should be Green and the text on button should be White.
  1. .button {  
  2.     background-color: #4CAF50;   
  3.     border: none;  
  4.     color: white;  
  5.     padding: 15px 32px;  
  6.     text-align: center;  
  7.     text-decoration: none;  
  8.     display: inline-block;  
  9.     font-size: 14px;  
  10.     margin: 4px 2px;  
  11.     cursor: pointer;  
  12. }  
  13.   
  14. .button4 {border-radius: 14px;} 
For table design and layout, the table width should be 70%.
  1. table {  
  2.             font-family: arial, sans-serif;  
  3.             border-collapse: collapse;  
  4.             width: 70%;  
  5.       } 
For textbox design and layout, the textbox background color is Orange and Text is in blue. 
  1. .textbox {  
  2.     height: 50px;  
  3.     padding: 0 10px;  
  4.     border: none;  
  5.     background: Orange;  
  6.     background: Orange;  
  7.     box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);  
  8.     font-family: 'Montserrat', sans-serif;  
  9.     text-indent: 10px;  
  10.     color: blue;  
  11.     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);  
  12.     font-size: 20px;  
  13.     width: 470px;  
  14. }  
  15.  .textbox:focus {  
  16.     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(255, 255, 255, 0.15);  
  17.     outline: none;  
  18.     background: Orange;  
  19.     background: Orange;  
  20.     outline: solid 1px yellow;  
  21. } 
Part2

Add a Webform named Default.aspx. 
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title>Satyaprakash Wcf Concept</title>  
  8.     <link href="Styles.css" rel="stylesheet" />  
  9.     <script language="javascript" src="../Validation.js" type="text/javascript"></script>  
  10.     <script language="javascript" type="text/javascript">  
  11.         function Validation() {  
  12.             if (Required('<%=txtname.ClientID%>', ' Name'))  
  13.                 if (Required('<%=txtGender.ClientID%>', ' Gender'))  
  14.                     if (Required('<%=txtsalary.ClientID%>', ' Salary'))  
  15.                         return true;  
  16.             return false;  
  17.         }  
  18.     </script>  
  19. </head>  
  20. <body>  
  21.     <form id="form1" runat="server">  
  22.     <div>  
  23.          <h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">SATYAPRAKASH's  WCF CONCEPT</h2>  
  24.         <fieldset>  
  25.             <legend style="font-family:Arial Black;color:orangered">WCF INSERT USING STORED PROCEDURE</legend>  
  26.             <table align="center" border="1" cellpadding="4" cellspacing="4">  
  27.             <tr><td align="center"><asp:TextBox ID="txtname" class="textbox" runat="server" placeholder="Enter Name.."></asp:TextBox></td></tr>  
  28.             <tr><td align="center"> <asp:TextBox ID="txtGender" class="textbox" runat="server" placeholder="Enter Gender.." ></asp:TextBox></td></tr>  
  29.             <tr><td align="center"><asp:TextBox ID="txtsalary" class="textbox" runat="server" placeholder="Enter Salary.."></asp:TextBox></td></tr>    
  30.             <tr><td align="center">  
  31.                 <asp:Button ID="btnsave" runat="server" Text="Save" class="button button4" OnClick="btnsave_Click" OnClientClick="javascript:return Validation();" />  
  32.                 <asp:Button ID="btnreset" runat="server" Text="Reset" class="button button4" OnClick="btnreset_Click"/>  
  33.             </td></tr>                  
  34.          </table>  
  35.        </fieldset>  
  36.     </div>  
  37.     <footer>  
  38.         <p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">© <script> document.write(new Date().toDateString()); </script></p>  
  39.     </footer>  
  40.     </form>    
  41. </body>  
  42. </html> 
Description of Part2

How to apply CSS classes in Server controls of ASP.NET Web page.

To apply CSS in button , proceed as shown below.
  1. <asp:Button ID="btnsave" runat="server" Text="Save" class="button button4" OnClick="btnsave_Click" OnClientClick="javascript:return Validation();" />  
  2. <asp:Button ID="btnreset" runat="server" Text="Reset" class="button button4" OnClick="btnreset_Click"/> 
To apply CSS in TextBoxes, proceed as shown below.
  1. <asp:TextBox ID="txtname" class="textbox" runat="server" placeholder="Enter Name.."></asp:TextBox>  
  2. <asp:TextBox ID="txtGender" class="textbox" runat="server" placeholder="Enter Gender.." ></asp:TextBox>  
  3. asp:TextBox ID="txtsalary" class="textbox" runat="server" placeholder="Enter Salary.."></asp:TextBox> 
To apply CSS in tables, proceed, as shown below. 
  1. table {    
  2.             font-family: arial, sans-serif;    
  3.             border-collapse: collapse;    
  4.             width: 70%;    
  5.       }    
  1. <table align="center" border="1" cellpadding="4" cellspacing="4">  
Here CSS classes table of CSS file is added.
 
The output of TextBoxes of ASP.NET Web page is given below.
 
 
 
 The output of buttons of ASP.NET Web page is given below.
 
 

The output of table of ASP.NET Web page is given below.
 


Summary
We learned:
What is CSS in ASP.NET?
How to write CSS in ASP.NET.
How to apply CSS in ASP.NET Server Controls.
Single CSS file is sufficient for all Server Controls in ASP.NET.