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 <p> ... </p> HTML tag. This applies to any use of the <p>
inside 'any' HTML file that references this CSS file. You may notice that our
text in figure 1 is enclosed inside a <p> tag and this is why the CSS
reference affected it. Try it yourself and type some text outside a <p> 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 <p> 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.
Basic Syntax
Rules

Selectors

Any HTML element is a possible CSS1 selector. The selector is simply the element that is linked
to a particular style. For example, the selector in

P { text-indent: 3em }

is P.

Class Selectors

A simple selector can have different classes, thus allowing the same element to have different
styles. For example, an author may wish to display code in a different color depending on its
language:

code.html { color: #191970 }

code.css { color: #4b0082 }

The above example has created two classes, css and html for use with HTML's CODE element.
The CLASS attribute is used in HTML to indicate the class of an element, e.g.,

<P CLASS=warning>Only one class is allowed per selector.

For example, code.html.proprietary is invalid.</p>

Classes may also be declared without an associated element:

.note { font-size: small }

In this case, the note class may be used with any element.

A good practice is to name classes according to their function rather than their appearance. The
note class in the above example could have been named small, but this name would become
meaningless if the author decided to change the style of the class so that it no longer had a small
font size.

ID Selectors

ID selectors are individually assigned for the purpose of defining on a per-element basis. This
selector type should only be used sparingly due to its inherent limitations. An ID selector is
assigned by using the indicator "#" to precede a name. For example, an ID selector could be
assigned as such:
#svp94O { text-indent: 3em }

This would be referenced in HTML by the ID attribute:

<P ID=svp94O>Text indented 3em</P>

Contextual Selectors

Contextual selectors are merely strings of two or more simple selectors separated by white space.
These selectors can be assigned normal properties and, due to the rules of cascading order, they
will take precedence over simple selectors. For example, the contextual selector in

P EM { background: yellow }

is P EM. This rule says that emphasized text within a paragraph should have a yellow
background; emphasized text in a heading would be unaffected.

Declarations

Properties

A property is assigned to a selector in order to manipulate its style. Examples of properties

include color, margin, and font.

Values

The declaration value is an assignment that a property receives. For example, the property color
could receive the value red.

Grouping

In order to decrease repetitious statements within style sheets, grouping of selectors and
declarations is allowed. For example, all of the headings in a document could be given identical
declarations through a grouping:

H1, H2, H3, H4, H5, H6 {

color: red;
font-family: sans-serif }

Inheritance

Virtually all selectors which are nested within selectors will inherit the property values assigned
to the outer selector unless otherwise modified. For example, a color defined for the BODY will
also be applied to text in a paragraph.

There are some cases where the inner selector does not inherit the surrounding selector's values,
but these should stand out logically. For example, the margin-top property is not inherited;
intuitively, a paragraph would not have the same top margin as the document body.
Comments

Comments are denoted within style sheets with the same conventions that are used in C
programming. A sample CSS1 comment would be in the format:

/* COMMENTS CANNOT BE NESTED */

Pseudo-classes and Pseudo-elements

Pseudo-classes and pseudo-elements are special "classes" and "elements" that are automatically
recognized by CSS-supporting browsers. Pseudo-classes distinguish among different element
types (e.g., visited links and active links represent two types of anchors). Pseudo-elements refer
to sub-parts of elements, such as the first letter of a paragraph.

Rules with pseudo-classes or pseudo-elements take the form

selector:pseudo-class { property: value }

or

selector:pseudo-element { property: value }

Pseudo-classes and pseudo-elements should not be specified with HTML's CLASS attribute.
Normal classes may be used with pseudo-classes and pseudo-elements as follows:

selector.class:pseudo-class { property: value }

or

selector.class:pseudo-element { property: value }

Anchor Pseudo-classes

Pseudo-classes can be assigned to the A element to display links, visited links and active links
differently. The anchor element can give the pseudo-classes link, visited, or active. A visited
link could be defined to render in a different color and even a different font size and style.

An interesting effect could be to have a currently selected (or "active") link display in a slightly
larger font size with a different color. Then, when the page is re-selected the visited link could
display in a smaller font size with a different color. The sample style sheet might look like this:

A:link { color: red }

A:active { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }
First Line Pseudo-element

Often in newspaper articles, such as those in the Wall Street Journal, the first line of text in an
article is displayed in bold lettering and all capitals. CSS1 has included this capability as a
pseudo-element. A first-line pseudo-element may be used in any block-level element (such as P,
H1, etc.). An example of a first-line pseudo-element would be:

P:first-line {
font-variant: small-caps;
font-weight: bold }

First Letter Pseudo-element

The first-letter pseudo-element is used to create drop caps and other effects. The first letter of
text within an assigned selector will be rendered according to the value assigned. A first-letter
pseudo-element may be used in any block-level element. For example:

P:first-letter { font-size: 300%; float: left }

would create a drop cap three times the normal font size.

Cascading Order

When multiple style sheets are used, the style sheets may fight over control of a particular
selector. In these situations, there must be rules as to which style sheet's rule will win out. The
following characteristics will determine the outcome of contradictory style sheets.

1. ! important

Rules can be designated as important by specifying ! important. A style that is

designated as important will win out over contradictory styles of otherwise equal weight.
Likewise, since both author and reader may specify important rules, the author's rule will
override the reader's in cases of importance. A sample use of the ! important statement:

BODY { background: url(bar.gif) white;

background-repeat: repeat-x ! important }

2. Origin of Rules (Author's vs. Reader's)

As was previously mentioned, both authors and readers have the ability to specify style
sheets. When rules between the two conflict, the author's rules will win out over reader's
rules of otherwise equal weight. Both author's and reader's style sheets override the
browser's built-in style sheets.

Authors should be wary of using ! important rules since they will override any of the
user's ! important rules. A user may, for example, require large font sizes or special
colors due to vision problems, and such a user would likely declare certain style rules to
 be ! important, since some styles are vital for the user to be able to read a page. Any
! important rules will override normal rules, so authors are advised to use normal rules
almost exclusively to ensure that users with special style needs are able to read the page.

3. Selector Rules: Calculating Specificity

Style sheets can also override conflicting style sheets based on their level of specificity,
where a more specific style will always win out over a less specific one. It is simply a
counting game to calculate the specificity of a selector.

a. Count the number of ID attributes in the selector.

b. Count the number of CLASS attributes in the selector.
c. Count the number of HTML tag names in the selector.

Finally, write the three numbers in exact order with no spaces or commas to obtain a
three digit number. (Note, you may need to convert the numbers to a larger base to end
up with three digits.) The final list of numbers corresponding to selectors will easily
determine specificity with the higher numbers winning out over lower numbers.
Following is a list of selectors sorted by specificity:

#id1 {xxx} /* a=1 b=0 c=0 --> specificity = 100 */

UL UL LI.red {xxx} /* a=0 b=1 c=3 --> specificity = 013 */
LI.red {xxx} /* a=0 b=1 c=1 --> specificity = 011 */
LI {xxx} /* a=0 b=0 c=1 --> specificity = 001 */

4. Order of Specification

To make it easy, when two rules have the same weight, the last rule specified wins.

Introduction to ASP.NET 2.0 Themes

6/7/2006 9:02:58 AM

In this article we will try to cover one great feature of ASP.NET 2.0, i.e. Themes. Themes are the
great way to customize user-experience in the web application. Themes are used to define the
look and feel of the web application, similar to the use of Cascading Style Sheets (CSS). Unlike
CSS, themes can specify the look of the server-side control like a tree-view control, how they
will appear when they are rendered by the browser.

In this article we will try to cover one great feature of ASP.NET 2.0, i.e. Themes. Themes are the
great way to customize user-experience in the web application. Themes are used to define the
look and feel of the web application, similar to the use of Cascading Style Sheets (CSS). Unlike
CSS, themes can specify the look of the server-side control like a tree-view control, how they
will appear when they are rendered by the browser.
A theme once they are created can be used in one of the following two ways.

1. Themes can be used as a style sheet, which is similar in nature as the regular CSS,
2. Themes can be used as customized themes, which change the order of preference for
style rules, and will specify the style to use for each element, overriding any style
preference specified in a separate style sheet, or even in the style attribute of an element.

The process of creating a theme involves creation of .skin file which have the definition of
appearance of each element on the page, and ASP.NET puts this skin file within a folder name of
which specifies the name of the theme. All the themes created are placed under a folder named
App_Themes with in your application folder.

Let us do some hands on to get a feel of the same. But Make sure SQLSERVER 2005 EXPRESS
is installed and running.

To Create a theme, right-click solution explorer, or the root folder, and select Add ASP.NET
Folder [ Theme (see Figure 1).

Figure 1 - Creating a Theme

This will create an empty folder within the APP_Theme folder. Let us re-name the folder as Blue
Theme. By Right clicking the App_Theme Folder and selecting Add ASP.NET Folder, create
another theme folder named Red Theme.

Now Right –Click the Blue theme folder and select Add New Item. In the Dialog box select Skin
File and name it as MyBlueSkin (see Figure 2).
 Figure 2 - Naming a Theme

<%--
Default skin template. The following skins are provided as examples only.

1. Named control skin. The SkinId should be uniquely defined because

duplicate SkinId's per control type are not allowed in the same theme.

<asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" >

<AlternatingRowStyle BackColor="Blue" />
</asp:GridView>

2. Default skin. The SkinId is not defined. Only one default

control skin per control type is allowed in the same theme.

<asp:Image runat="server" ImageUrl="~/images/image1.jpg" />

In the same way create the MyRedSkin skin file in the Red Theme Folder.

Now let us add one web page and name the same as StyleSheetDemo.aspx. In the page we add
one label control, name it as label1 and one textbox control name it as TextBox1.

The page will look like Figure 3.

Figure 3 - The Style Sheet Demo Page for the Theme

Now we will add some code in the MyBlueSkin skin file which we created earlier.
The code will be as follows:
<asp:Label runat="server" backcolor="blue" forecolor="red" font-size="xx-large" font-names="arial" />
<asp:TextBox runat="server" backcolor="cyan" forecolor="blue" font-size="xx-large" font-names="arial" />

Now double-click the web.config file and put a section as follows:

<?xml version="1.0"?>
<configuration>
<appSettings/>
<connectionStrings/>
<system.web>
<compilation debug="false" strict="false" explicit="true" />
<pages theme ="Blue Theme" />
<authentication mode="Windows" />
</system.web>
</configuration>

Now save the web.config and put a little code in Page_Load Method of the
StyleSheetDemo.aspx
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
Label1.Text = "Theme demo"
TextBox1.Text = "My Blue Theme"
End If
End Sub

Now run the page by right clicking it and selecting View in Browser. The page will be like
Figure 4:

Figure 4 - The Themed Web Page

Now in the same way add a skin file in the Red Theme folder and name it as MyRedSkin.skin.
Then add the following code in the skin file.
<asp:Label runat="server" backcolor="red" forecolor="blue" font-size="small" font-names="arial" />
<asp:TextBox runat="server" backcolor="blue" forecolor="white" font-size="small" font-names="arial" />

Change the web.config file as follows:

<configuration>
<appSettings/>
<connectionStrings/>
<system.web>
<compilation debug="false" strict="false" explicit="true" />
<pages theme ="Red Theme" />
<authentication mode="Windows" />

Now run the page in the browser and will find the similar result as in Figure 5.

Figure 5 - Results of web.config change

With the profile you can allow the user to select the themes.

We will create another demo web site to see the same.

Open Visual Studio 2005 or Visual Web developer 2005 Express and select Open Web Site.
Click the new folder Icon and type in ProfileandThemes (see Figure 6) and then click Open. This
will create an empty web site, where we can put anything as we wish.
 Figure 6 - Creating a new folder for a Web site.

Now we will put a web.config into the we site by right-click the web folder and then selecting
Add New Items. In the dialog box (see Figure 7) select Web Configuration File and click add.

Figure 7 - The Add New Item Dialog

Delete the content of the web.config file to match up what is displayed in Figure 8.
 Figure 8 - The web.config file

Now put the following code between <system.web> </system.web>

<anonymousIdentification enabled ="true" />
<profile>
<properties>
<add name="UserName" defaultValue="MyUserName" allowAnonymous ="true"/>
</properties>
</profile>

Now create a web page and name it as ProfileTheme.aspx

Set the page as shown in Figure 9.

Figure 9 - Creating a page with a label and theme.

Now add another page and name it as Settings.aspx In the source view mode of the
ProfileTheme.aspx, type in the following code just after the label control.
<strong>Welcome</strong>
<asp:Label ID="Label1" runat="server" Text="Label" Width="208px" Font-Bold="True"></asp:Label>
<a href="Settings.aspx">Settings.aspx</a>

This create as hyperlink for the settings page in the profilethemes page.

Now put some controls in the settings page. The page should look like Figure 10:
 Figure 10 - Settings.aspx page with textbox and Save button.

Now we need to put some code. Double click the Button and in the click event write the
following code:
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Profile.UserName = TextBox1.Text
Response.Redirect("ProfileTheme.aspx")
End Sub

Mdify the ProfileTheme.aspx page and add a textbox control there. And add a little bit of code in
the page load event:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
If Not Page.IsPostBack Then
Label1.Text = Profile.UserName
TextBox1.Text = "Themes with Profiles"
End If
End Sub

Now create the two themes in the same way we discussed earlier. This because in this demo I am
going to use the same themes. Now in the web.config file add the following property:
<profile>
<properties>
<add name="UserName" defaultValue="MyUserName" allowAnonymous ="true"/>
<add name ="MyThemes" defaultValue ="Blue Theme" allowAnonymous ="true" />
</properties>
</profile>

And we will make some more changes in the Settings page now, to allow the user to select a
theme. Add a dropdowncombo and Enter the theme names in the items box. The page should
look like Figure 11:
 Figure 11 - Page now with DropDownCombo control added.

Add the following code in the Page load event of the settings page:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
If Not Page.IsPostBack Then
DropDownList1.Items.FindByValue(Profile.MyThemes).Selected = True
End If
End Sub

And also modify the Click Event of the Save button.

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Profile.UserName = TextBox1.Text
Profile.MyThemes = DropDownList1.SelectedValue
Response.Redirect("ProfileTheme.aspx")
End Sub

In the ProfileThemes.aspx page add the following code:

Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs)
Page.Theme = Profile.MyThemes
End Sub

Now run the application. This will create a SQL SERVER database file automatically and will store all the
information regarding a User Profile.

So whenever the user log on to the website, he will find his settings intact (see Figure 12).
 Figure 12 - Final page

In this demo I have used lot of modifications in the source and code. This could have been
avoided. But If you follow all the steps and at any point of time try to test the application you can
do that. I have also included some overview about the profiles to make you understand how the
user settings area stored.