Post
Ask Question

How to use StyleSheets

How to use StyleSheet?

  • Style sheets describe how documents are presented on screens, in print, or perhaps how they are pronounced.
     
  • Cascading Style Sheets, or CSS, is the recommended way to control the presentation layer in a web document. The main advantage of CSS over presentational HTML markup is that the styling can be kept entirely separate from the content. For example, it's possible to store all the presentational styles for a 10,000-page web site in a single CSS file. CSS also provides far better control over presentation than do presentational element types in HTML.
Step 1
 
Right-click on solution explorer - Add New Item - Add StyleSheet.css
 
Step 2
 
In the body class of StyleSheet.css just give the property which has to be set for any page in the project.
 
Source code: StyleSheet.css
  1. body  
  2. {  
  3. background-color :Silver ;  
  4. }  
Step 3
 
Drag n drop StyleSheet.css from solution explorer
 
image2.gif
 
Step 4
 
Write the classes defining the style which has to be applied
 
Example: textbox background color has to be the same in all the pages so we define a class .txtbox with the background-color.
 
Source code: StyleSheet.css
  1. body  
  2. {  
  3. background-color :Silver ;  
  4. }  
  5. .txtbox  
  6. {  
  7. widows:20;  
  8. height:10;  
  9. background-color:Aqua;  
  10. }  
  11. .Dropdownlist  
  12. {  
  13. width:auto;  
  14. background-color :Lime;  
  15. } 
Step 5
 
Drag a textbox and give txtbox class as CSS class in the property.
 
image3.gif
 
Source code: Default.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5. <title>Untitled Page</title>  
  6. <link href="StyleSheet.css" rel="stylesheet" type="text/css" />  
  7. </head>  
  8. <body>  
  9. <form id="form1" runat="server">  
  10. <div>  
  11.   
  12. </div>  
  13. <br />  
  14. <br />  
  15. <asp:TextBox ID="TextBox1" runat="server" CssClass="txtbox"></asp:TextBox>  
  16. </form>  
  17. </body>  
  18. </html>  
Step 6
 
Add a new form and the same StyleSheet.css can be used for any textbox place in the project


Similar Articles