Top 10 CSS Techniques for Your ASP.NET Website

WEBINAR:On-Demand

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.

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.

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.

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:

Figure 2

Top 10 CSS Techniques for Your ASP.NET Website

WEBINAR:On-Demand

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.

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.

Advertiser Disclosure:
Some of the products that appear on this site are from companies from which QuinStreet receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. QuinStreet does not include all companies or all types of products available in the marketplace.

Thanks for your registration, follow us on our social networks to keep up-to-date