CSS Shorthands and Input Styling
The following is a list of useful shorthands for specifying typically large CSS properties in a small and succinct one line definition. This not only keeps your CSS files clean and easy to read, but more importantly, it significantly reduces the size of your CSS files.
CSS Shorthand Examples
The following is a list of some common CSS properties and their accompanying shorthand syntax:
.font_example
{
/*
font-style:normal;
font-variant:normal;
font-weight:bold;
font-size:12px;
font-family:Arial;
*/
/* The above properties can be shorthanded to: */
font:normal normal bold 12px Arial;
}
.border_example
{
/*
border-style:solid;
border-width:1px;
border-color:#000000;
*/
/* The above properties can be shorthanded to: */
border:solid 1px #000000;
}
.background_example
{
/*
background-color:Red;
background-image:url('logo.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top;
*/
/* The above properties can be shorthanded to: */
background:red url('logo.gif') no-repeat fixed top;
}
.margin_example
{
/*
margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:4px;
*/
/* The above properties can be shorthanded to: */
margin:1px 2px 3px 4px;
}
Input Elements
Input elements have traditionally been a big problem. The latest versions of Firefox (3.5.2), Safari (4.0.3), and Internet Explorer (8) all now support this new CSS-based way to control the look and style of input elements without having to manually add a specific CSS class to each element. The following is an example for styling a textbox element and a button element. These types are the asp:TextBox and asp:Button controls in ASP.NET.
input[type="text"]
{
/* The following changes all asp:TextBox controls: */
font-size:14px;
padding:3px;
border:solid 1px #c0c0c0;
}
input[type="submit"], input[type="button"]
{
/* The following changes all asp:Button controls: */
padding:5px;
background-color:Green;
border:solid 1px Black;
color:White;
}
Anchor Links
Anchor links can be specified for each state such as Hover, Visited, etc. This syntax is somewhat cumbersome but there is a simple short hand that can be used with commas. Here is an example of this more concise and clear syntax:
/* To specify a custom anchor, you can specify each state like this: */
a.custom_link_name1:link
{
color:Blue;
text-decoration:underline;
}
a.custom_link_name1:visited
{
color:Blue;
text-decoration:underline;
}
a.custom_link_name1:hover
{
color:Blue;
text-decoration:underline;
}
a.custom_link_name1:active
{
color:Blue;
text-decoration:underline;
}
/* This entire anchor definition can be specified as: */
a.custom_link_name2:link, a.custom_link_name2:visited, a.custom_link_name2:hover, a.custom_link_name2:active
{
color:Blue;
text-decoration:underline;
}
HTML To Run The CSS Code
Here is the HTML to run the above CSS code examples:
<asp:Label ID="lblFontExample" runat="server" CssClass="font_example">Font Example</asp:Label> <br /> <br /> <asp:Panel ID="pnlBorderExample" runat="server" CssClass="border_example">Border Example</asp:Panel> <br /> <br /> <asp:Panel ID="pnlBackgroundExample" runat="server" CssClass="background_example">Background Example</asp:Panel> <br /> <br /> <asp:Panel ID="pnlMarginExample" runat="server" CssClass="margin_example">Margin Example</asp:Panel> <br /> <br /> <asp:TextBox ID="txtExample" runat="server">Example Text Box</asp:TextBox> <asp:Button ID="btnExample" runat="server" Text="Example Button" /> <br /> <br /> <asp:HyperLink ID="hypExample" runat="server" CssClass="custom_link_name2" NavigateUrl="#">Example Anchor</asp:HyperLink>
The other big benefit is all of the typing you save in your HTML by not having to add these styles to each element manually.
Popular Articles
Recent comments
- Awsome!!
8 hours 34 min ago - C# insert image
23 hours 27 min ago - jkll
3 days 11 hours ago - Thank You
4 days 11 hours ago - Another approach
6 days 12 hours ago - Issue
1 week 1 hour ago - thanks
1 week 12 hours ago - Calendar date time
1 week 18 hours ago - Nice Explanation
1 week 22 hours ago - ramya
1 week 3 days ago

Doesn't work
I've been trying this but it just doesn't work:
input[type="text"]
{
/* The following changes all asp:TextBox controls: */
font-size:14px;
padding:3px;
border:solid 1px #c0c0c0;
}