.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;
}
{
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.
This starts with . (dot) and followed by the name of the css class.
.ChangeBackground
{
background-color:#c9c9c9;
}
{
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" />
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.
the # followed by name of the css class.
#divMain
{
width:100%;
border:1px solid #cccccc;
}
{
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.<div id="divMain">This is main placeholder</div>
<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>
<title> Use of Themes (Use of CSS and .skin files)</title>
<link href="App_Themes/Theme1/StyleSheet.css" type="text/css" rel="stylesheet" />
</head>
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