Cascading Style Sheets And Themes

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): • • • •

: 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.

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.,

Only one class is allowed per selector. For example, code.html.proprietary is invalid.

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:

Text indented 3em

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 UL UL LI.red LI.red LI

{xxx} {xxx} {xxx} {xxx}

/* /* /* /*

a=1 a=0 a=0 a=0

b=0 b=1 b=1 b=0

c=0 c=3 c=1 c=1

--> --> --> -->

specificity specificity specificity specificity

= = = =

100 013 011 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. 2. Default skin. The SkinId is not defined. Only one default control skin per control type is allowed in the same theme.

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:

Now double-click the web.config file and put a section as follows: <system.web> <pages theme ="Blue Theme" />

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.



Change the web.config file as follows: <system.web> <pages theme ="Red Theme" />

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> <profile> <properties>

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 Settings.aspx

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>

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.