Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
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. .
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.
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):
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.
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.
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:
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.,
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 }
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
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:
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:
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.
or
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:
or
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:
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 }
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:
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
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.
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.
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:
4. Order of Specification
To make it easy, when two rules have the same weight, the last rule specified wins.
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).
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.
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.
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 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:
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" />
Now run the page in the browser and will find the similar result as in Figure 5.
With the profile you can allow the user to select the themes.
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.
Delete the content of the web.config file to match up what is displayed in Figure 8.
Figure 8 - The web.config file
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
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.