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.