Applying style sheets (CSS) helps us to
maintain uniform look and feel for all the controls across the
page/application. The normal way of applying styles is to declare the styles in
the <style> tag or in a separate .css file and refer the class in all the
controls as follows.
<asp:TextBox ID="txtName"
CssClass="textStyle"
runat="server"></asp:TextBox>
This was good, but we had to set the CssClass="textStyle"
property to each and every control in the
page/application, any changes done in the <style> section or .css file
will get reflected in all the controls referring to the class.
Apply style in only one place
Now there is another shortcut, we can apply
the styles even without specifying the CssClass="textStyle" property.
Here’s how we do in.
Declare
styles in the <style> section or in a .css file as follows
<style type="text/css">
<style type="text/css">
[type=text]
{
color:Blue;
border: 1px solid black;
font-family:Verdana;
font-size:9pt;
}
[type=textarea]
{
color:Blue;
border: 1px solid black;
font-family:Verdana;
font-size:9pt;
}
[type=submit]
{
color:Blue;
border: 1px solid black;
}
td
{
color:Maroon;
font-family:Verdana;
font-size:10pt;
}
.redtextBox
{
color:Red;
border: 1px solid black;
font-family:Verdana;
font-size:9pt;
}
</style>
Once
we declare the styles in this way, we need not even set the class/cssclass
property to the controls, they will automatically take the styles.
<body>
<form id="frmStyles" runat="server">
<table>
<tr>
<td>Name</td>
<td><asp:TextBox
ID="txtName"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Age</td>
<td><asp:TextBox
ID="txtAge"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Address</td>
<td><asp:TextBox
ID="txtAddress"
runat="server" TextMode="MultiLine"></asp:TextBox>
</td>
</tr>
<tr>
<td>Phone</td>
<td><asp:TextBox
ID="txtPhone"
CssClass="redtextBox" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<asp:Button
ID="cmdSave"
runat="server"
Text="Save" />
<asp:Button
ID="cmdCancel"
runat="server"
Text="Cancel" />
</td>
</tr>
</table>
</form>
</body>
However if we want specific controls to take a different style, we can set the class/cssClass property to that control alone, setting at the control level overrides the settings done at the page/global level, hence the specific control takes the different style. In the above example the textbox txtPhone has a different style CssClass="redtextBox" hence appears different in the screen.
Build and run the application, the page will be displayed as follows.
Notice that we have not set the class/cssClass property to any control in the page, but still they automatically take the style.
No comments:
Post a Comment