Common Design For All Web Pages Without Asp.net Master Page

Background

When the word "common design" or consistent look of web page comes in mind many programmers thinking about the master pages but we can also give the consistent look to all web pages without master pages Using Asp.net Themes and Skins.

 

So how to achieve it let us see step by step with some theoretical concepts so beginners and students can also understand it.

What Is Asp.net Themes and Skins?

Themes and Skins allow us to apply a consistent look and feel to the web application or web site, themes can be used to apply the common style to the  HTML as well as Asp.net controls and on the other hand skins can be only used to apply the styles to  the Asp.net controls.

I hope you understand the basic concept of using Asp.net Themes and Skins,so in this article let us see about Asp.net Themes step by step how to use it.

First Create the web application as

1. "Start" - "All Programs" - "Microsoft Visual Studio 2010"
2. "File" - "New Website" - "C# - Empty website" (to avoid adding a master page)
3. Give the web site a name, such as UsingThemes or whatever you wish and specify the location
4. Then right-click on the solution in the Solution Explorer then select "Add New Item" - "Default.aspx page" (add two pages).

How to Add Asp.net themes

Add Asp.net Themes Folder

To use the themes in the web site ,we need to add Asp.net Themes folder by right clicking on solution explorer as



After adding the theme folder ,add the stylsheet.css file by right clicking on asp.net theme folder,now solution explorer will look like as follows.



Now write the CSS coding inside  StyleSheet.css file as



In the above code I have used just few code for designing body section but you can code for everything that what you want such as you can change the mouse cursor type as shown in below
 


I hope you understand the basic concepts from the above explanation .

How to Use Asp.net themes

To use created Asp.net themes in asp.net page you need to assign the created theme at page level as shown below.


In the above source code ,we are assigning the created  Asp.net theme at page level, created asp.net theme automatically appears in the box after using Themes property at page header.

Now run the application,which shows the following look



now click on Nextpage button



From the above example,its clear that we can achieve common design without master page.

Advantages of Asp.net Themes

1. Themes can be used to apply the common style to the  HTML as well as Asp.net controls.
2. their is no need to call css class  on all controls.
3. It automatically apply to all controls after assigning asp.net created theme at the page level.
4. gives the same consistency similar to master page in terms of design. 

Note

• When you use Asp.net themes then you need to add styleSheet.css file and in other hand when you use Asp.net Skin then you need to add Skinfile.skin file under Asp.net theme folder.
• For detailed code please download the zip file attached above.
• Master Pages are not used only for designing,it has different uses and advantages.
  

Summary

From all the examples above we see how to apply common design to the form using Asp.net theme. I hope this article is useful for all students and beginners. If you have any suggestion related to this article then please contact me.