Cascaded Style Sheets (CSS) in ASP.NET Web applications

Why CSS?

Any beginner web developer / designer can easily apply a multitude of formatting to the web pages he produce. One of the methods by which an experienced web designer can show up from the crowd is to provide flexibility to this formatting as well.

The biggest problem in traditional classic (specially static) HTML pages is that the text of your web page and the formatting operations performed over it are all mixed inside one place / one file. If we are to separate and rigidly specify the formatting from the text, then a single content (i.e., web page text) can consume many formatting styles without altering it's text contents at all. This is much like the skin-able desktop windows application in which you can have a single application and in the same time many skins that can be applied to it to quickly and easily change it's appearance.

What is CSS?

CSS (Cascading Style Sheets) is a well established and frequently used technology to achieve the separation we mentioned above between formatting and content. It's supported by virtually all of the moderns web browsers. When you employ CSS techniques, you are always sure that altering the formatting of your web pages will go as smooth as possible. .

How CSS works? What about CSS levels?

You can apply CSS formatting to your web pages at different levels. The first level applies formatting to an entire set of pages in the same time, and this is the level we are mostly interested in in this tutorial. The next two lower levels is to apply CSS to one page by defining the CSS styles in the head of this page or to apply CSS to one particular element inside the page using the STYLE attribute. We are not going to present the two later lower levels here as they suffer from the original problem we are trying to solve: Text is kept with formatting in the same place! Let's illustrate the first level by an example.

Example 1: Using CSS to format a set of pages ( Download )

Create 2 HTML pages as shown in figure 1. When you display them they will display with their default formatting in your web browser as in figure 2.

Figure 1

Figure 2

We need now to create a CSS file and to apply it's formatting instructions to our pages.

First of all, create a text file (this is our CSS file) and type the text in figure 3 inside it and save it as "Format.CSS".

Figure 3

We now need to bind the formatting instructions stored in the "Format.CSS" file to our two pages. This can be easily achieved by adding a link tag to the head section or our HTML pages. See our two HTML pages after the changes in figure 4.

Figure 4

Save your files and now let's redisplay our HTML pages in a web browser after these changes. The new look of out HTML pages are depicted in figure 5.

Figure 5

Nice, huh? Now let's put things together and formalize what we discovered in this example.

Jigsaw now combined!

The big picture of CSS that you can acquire from example 1 is that we have a CSS file inside which we store our formatting instructions and then we apply these instructions to any HTML file we need by adding a reference to the CSS file inside our HTML file's head section.

The biggest advantage we can see here is that you can have 100's of HTML files and in the same time you are able to change the format of every file of them just by changing the format of the CSS file they are all referring to. What a life saver!

Let's now dig somewhat deep inside the the code we added to our HTML files to refer to the CSS file (See figure 4):

<LINK : The HTML's standard link tag.
REL="stylesheet" : The forward link type; do not bother yourself with more about it. Set it always to this value.
TYPE="text/css" : Advisory content type; again, do not bother yourself with more about it. Set it always to this value.
HREF="../CSS/Format.CSS"> : This is our most important element, this is the file name of our CSS file. The '../CSS' is not of particular meaning; it's just the name of the folder inside which our CSS file is stored and which can be anything or even nothing.

Another part of our example of equal importance is the CSS file itself (see figure 3). Let's analyze what we can see there:

p : This means that we are defining here the formatting of 'any' HTML text enclosed inside a ... HTML tag. This applies to any use of the inside 'any' HTML file that references this CSS file. You may notice that our text in figure 1 is enclosed inside a tag and this is why the CSS reference affected it. Try it yourself and type some text outside a tag and note that it will not be affected at all regardless of any CSS file references you use!
{ : Start definition of a formatting element.
font-family: Impact; : We are saying: 'Let all text inside a tag be in the IMPACT font. IMPACT is simply a font name.
text-align: center; : Self descriptive.
color: green; : Self descriptive.
} : End definition of a formatting element.

But no one can practically proceed like this!

Regardless of the flexibility we gained from using CSS, we are still facing a big problem with the development of the CSS files themselves. No one likes to format text by typing the name of the font he is using or by calculating the numeric equivalent of the color he needs to use. People typically prefer a WYSIWYG interface from which they can visually do whatever formatting they like and then the CSS file is generated automatically and accordingly.

Fortunately, Microsoft Visual Studio 2005 contains a visual designer for CSS files. For example, you can select the following from your menus: File / New / File / Web / Style Sheet. You will be presented with a CSS editor inside which you can visually customize your CSS file.

And .... What is next?

The best thing about CSS is not only the flexibility it provides. It's widespread and support in virtually any modern web browser is also a major advantage. If you can afford to go with some thing richer than CSS but less standard, you can go with ASP.NET Themes and Skins. They are much powerful than CSS but still not widely used as CSS.

For further information

W3C is the CSS home: http://www.w3.org/Style/CSS/
Refer to the online copy of Microsoft Developers Network at http://msdn.microsoft.com or use you own local copy of MSDN.

Tutorial toolbar: Tell A Friend | Add to favorites | Feedback