Top 10 CSS Techniques for Your ASP.NET Website

Introduction

CSS - Cascading Style Sheets play a vital role in helping you achieve professional and pleasing user interfaces on the web, which makes the first impression long lasting. However, as with every other technique, CSS can also slow down your site if used in the wrong manner.

Look below for ten such techniques that allow you to fine tune your website.

1. CSS Optimizers

CSS Optimization does not refer to minimizing the size of the css file. It involves a systematic procedure of creating an syntactical, organized and clutter-free file. This can be achieved with the use of utilities that are available on the web that can compress and optimize the css files and reduce them to a considerable smaller size.

Applications like CssTidy and YUI Compressor not only compress the css files by removing the whitespace; they also do additional actions like creation of shorthand syntaxes, correct css properties and their errors.

There are quite a few online websites that help you to optimize your css files based on predefine rules. Do not hesitate to try them.

  1. Cssoptimiser
  2. CSS Formatter and Optimiser
  3. Code Beautifier
  4. CSS Validator

Below is a screenshot of the CSS validation service offered by W3C.

a screenshot of the CSS validation service offered by W3C
Figure 1

2. Shorthand Notation in CSS?

The Shorthand notation in CSS saves a lot of effort and improves your code. Margin, padding, and font are primary candidates for shorthand notations. Note that there are many more. The following sample shows you how to create a shorthand property.

Old fashioned:
margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px

Shorthand notation:
margin: 2px 1px 3px 4px (the order is - top, right, bottom, left)

The rule of writing shorthand notation is very simple. Look below for a simple example.

CSS notationTopRightBottomLeft
margin: 1px;1px1px1px1px
margin: 2px 3px;2px3px2px3px
margin: 2px 3px 4px;2px3px4px3px
margin: 1px 2px 3px 4px;1px2px3px4px

Note that if you do not specify any values for the property, the properties would retain their default values. The shorthand notation not only keeps our code clean, but makes the file size considerably less.

3. Use Conditional Comments

Some applications have browser specific style sheets. In such cases, load the css files conditionally. This applies very well to version-specific browsers too. The following line would load only if the browser is Internet Explorer 8.

  <!--[if IE 8]>
  	<link rel="stylesheet" type="text/css" href="ie8.css">
  <![endif]-->

4. Remove Extra Line Breaks

The extra line breaks added in CSS files add humongous size to the css file. So make sure you eliminate all those unnecessary extra line breaks. But ensure that you make it readable for you and others who may use the CSS file.

5. Use CSS Versus Images

Do not use images to display text. Instead use CSS attributes and apply style to them.

5. Profile CSS Using Browser Developer Tools

At this technological era, your browser is your first test tool for profiling the performance and style of your rendered ASP.NET pages.

Google's Chrome provides us with a richer profiling tool. It can be invoked by pressing "CTRL+ SHIFT + I". Select the "Audit" tab, and the audits. And click on the run button. You will be presented with some results. The results are impressive as they tell you what you need to do to improve performance of your page with precise details. This involves CSS findings too.

A snapshot of Google Chrome audit results is shown below:

A snapshot of Google Chrome audit results
Figure 2



Top 10 CSS Techniques for Your ASP.NET Website

6. Use Background Colors Instead of Heavy Images

CSS lets you define lighter ways of applying simple, layered and gradient colors to your webpages. This can replace the traditional way of using rich background images and thus load your pages faster. If you have gradient strips then you can use the repeat property to style the entire element.

For e.g. The following image repeats and fills the div.

  div {
  	background-image: url(http:/mywebsite/myimages/image1.gif);
  	background-repeat: repeat-y; 
  }

If you are using Internet Explorer, you could use the Microsoft DXImage properties like the div below. Ensure that you specify the start and end color suitably.

  <div style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');"></div>?

7. Use Multi Class Elements to Achieve the Required Styles

You can apply more than one style to an element. All you have to do is separate the style elements with a space. This ensures that you do not create repeated css styles with minor differences to achieve the final style.

And note that the bottom most style overwrites the conflicting style properties and takes precedence.

  <div id="storyDiv" class="first second third"></div>

The above line shows that multi classes (first, second and third) are applied to the div element.

8. Use the Important Keyword to Apply Precedence

The !important word can be used to apply precedence even over the last specified CSS rule regardless of what appears after it.

   <div id="storyDiv" class="first second"></div>
   
    {
   .first : padding-bottom: 2.0px !important; 
   .second: padding-bottom:3.0px;
           }
 

In this case, the div will be applied with the "first" CSS rule.

9. Microsoft Visual Studio's CSS Style Manager , CSS Properties Window

Microsoft Visual Studio also provides support to view, edit and manage CSS files to a great extent. The versions above 9.0 provides us these features.

Some of the functionalities provided by Microsoft Visual Studio are outlined here:

  • Indicates used CSS elements within a page with a circle.
  • Rich tooltip to see the entire css rule when hovered.
  • Quickly edit the CSS rules
  • CSS Intellisense support

There are various sites on the web that already show you how to use these effectively. Your first stop should be the Scott Guthrie's blog. Refer to the references sections for such interesting URLs.

References

W3C CSS validator
Scott Gutherie's blog on VS Webdesigner and its CSS support
100 CSS Tools
Effective CSS Shorthand

Related Articles





About the Author

Srinath M S

I would love to leave a footprint in this flat world

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • IT decision support impacts all aspects of technology management, from governance and strategy to budgets and resource planning. IT decision support effectiveness often falls prey to data-driven challenges that make it difficult to understand the data in context. These challenges: overwhelming data volumes, heterogeneous data types, and growing data complexity. This Forrester Consulting Paper reports the three key findings from their study conducted, on behalf of BDNA, to test the hypothesis that data …

  • A majority of organizations are operating under the assumption that their network has already been compromised, or will be, according to a survey conducted by the SANS Institute. With many high profile breaches in 2013 occurring on endpoints, interest in improving endpoint security is top-of-mind for many information security professionals. The full results of the inaugural SANS Endpoint Security Survey are summarized in this white paper to help information security professionals track trends in endpoint …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds