Tuesday, 17 June 2014

CSS in asp.net with c#, casceding style sheets in asp.net



.css file
1.     for a particular element - this defines the style of any html element and is named as the html tag name like p, table, tr etc. Following style will apply to all table of the page.
         table
            {
                  border-collapse:collapse;
                  border:1px solid #c0c0c0;
            }
   2.  for any html element - this defines the style that can be implemented in any html elements.
        This starts with . (dot) and followed by the name of the css class.
         .ChangeBackground
         {
               background-color:#c9c9c9;
         }
         Above css class can be specified in any html element. For example
         In HTML tag: <span class="ChangeBackground">My text</span>
         In ASP.NET Control: <asp:Label ID="lblMessage" runat="Server" CssClass="ChangeBackground" />
   3.   for a particular Identifier - this defines the style of an html element whose id is specific. This starts with
         the # followed by name of the css class.
         #divMain
         {
            width:100%;
            border:1px solid #cccccc;
         }
         Above css class behavior will be implemented to the html element whose id is "divMain". like
         <div id="divMain">This is main placeholder</div>
The .css file of theme is referred as the link element with type as text/css (as it is referred for normal .css classes) under head element.
<head>
<
title> Use of Themes (Use of CSS and .skin files)</title>
<
link href="App_Themes/Theme1/StyleSheet.css" type="text/css" rel="stylesheet" />
</
head>

2. Changing theme dynamically
In the above example, we saw that we had pre-defined the theme of the page in the Page directives of the .aspx page, what if we want to change the theme (look and feel of the page) dynamically based on user preference? In that case we will have to see some other alternatives, the good news is we can change the theme dynamically from code behind. See the code below.
protected void Page_PreInit(object sender, EventArgs e)
{
this.Page.Theme = "Theme2" // name of the theme
}

No comments:

Post a Comment