Since applying a custom style to match the theme of your site can really add a lot in terms of appearance and continuity, I thought that I would share a couple of my favorite CSS styles for ASP.NET controls. These are small changes that can add up and really make a lasting impression on the end user.
I always use one (or more) separate CSS class files for my projects, but I also
mix inline CSS styles in as well, usually when applying padding to a table cell
or something small like that. The great thing about external CSS files is obvious
and well known - site level changes, whether in layout or purely aesthetic, can
be made by changing one file instead of many.
The asp:Textbox control is widely used but, as it comes, is fairly basic and unappealing.
I jazz mine up with a CSS class that adds a slight gradient background, a border,
a smaller height, and changes the font weight and size:
.textBox
{
font-family: Verdana,
Tahoma;
font-size: 11px;
height: 24px;
background: url('../images/bg_textbox.gif');
background-repeat: repeat-x;
border: solid
1px #acabab;
padding: 2px;
}
The background image file
bg_textbox.gif was created in Adobe Photoshop.
It's 26 pixels in height and 1 pixel in width and contains the slightest white to
gray gradient that adds a really nice polish to the text box control.
<asp:TextBox
runat="server"
ID="txtUsername"
CssClass="textBox"
/>
Here's the result when you use the CSS class:
Username:
This what the asp:Textbox control looks like without CSS styling:
Username:
The asp:Button control goes right along side the text box in most instances and,
like the text box control, is pretty basic without any styling:
Using the same concept of applying a background image as used in the text box control,
the button can be made much more visually appealing and seamlessly integrate with
the theme and colors of your site:
.Button
{
background: url('../images/bg_button.jpg')
repeat-x;
font-weight: bold;
color: #074171;
border: solid
1px #b9c9d6;
font-size: 11px;
font-family: Verdana;
height: 20px;
}
The image file
bg_button.jpg is 25 pixels in height by 1 pixel in width
and has a couple slight gradients that match the color scheme of one of my previous
applications:
<asp:Button
runat="server"
ID="btnSignIn"
CssClass="Button"
Text="Sign In"
/>
Here's the final result when you use the CSS class for styling the controls:
As opposed to without styling: