Top 10 CSS Techniques for Your ASP.NET Website

CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

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 notation Top Right Bottom Left
margin: 1px; 1px 1px 1px 1px
margin: 2px 3px; 2px 3px 2px 3px
margin: 2px 3px 4px; 2px 3px 4px 3px
margin: 1px 2px 3px 4px; 1px 2px 3px 4px

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

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read