Post
Ask Question

How To Create ASP.Net WebSite With CSS Template

Introduction

Today, I am creating a website using CSS templates. You can create a website and apply various types of CSS themes. You can make it more beautiful but suppose you want to associate a CSS template with your website then this article will be useful. You can easily integrate the CSS template in your ASP.NET Website by applying a very few steps.

In that context, here I have a CSS template and I am using that template in my ASP.NET Website. So, let's proceed with the following sections:

  • Choose CSS Template
  • Creating ASP.NET Website
  • Integrate CSS Template with Website
  • Running the Website

Choose CSS Template

Here, you choose your CSS template. If you don't have it, you can simply download it from Google.

Creating ASP.NET Website

Now we'll create the ASP.NET Empty Website using the following procedure.

Step 1: Open Visual Studio and go to "File" -> "New" -> "Website..."

Step 2: Select an "Empty Website" and enter the name for it.

Creating Empty ASP.NET Web Site

You can see your empty Solution Explorer in it.

Solution Explorer

Integrate CSS Template with Website

Now we'll integrate the CSS template with our website. Proceed with the procedure below:

Step 1: Open the CSS Template folder in the Windows Explorer and copy all contents from it.

Copy Template Content

Step 2: Paste all contents in your website as shown below:

Integrate Template with Website

Step 3: Open the Index.html page.

Working with Master Page

Step 4: Create a Master Page in your Website.

Adding Master Page

Step 5: Now we'll split this step into multiple steps:

  • Head Element

    Copy the content of <Head> from the Index.html page as you saw in the screenshot below.

    Copying Head Content

    Now paste it in the place of <Title> in the Master Page as shown below:

    Pasting Content in Master Page
     
  • Header Content

    Copy the Header part from the <body> from the Index.html page. As you can see in the screenshot below.

    Header of Template

    Now paste it in the place of <div> present in the preceding of ContentPlaceHolder in the Master Page as shown below:

    Header in Master Page
     
  • Footer Content

    Copy the Footer part from the <body> from the Index.html page. As you can see in the screenshot below

    Footer in Template

    Now paste it in the place of <div> present in the following of ContentPlaceHolder in the Master Page as shown below:

    Footer in Master  

Step 6: Now check your Master Page (Design View). If the page is not responding perfectly then build your solution.

Master Page Design View

Working with the Content Page

Step 6: Now add a Content Page of your Master Page.

Step 7: Copy the Main content from the <body> from the Index.html page as you can see in the screenshot below

Main Content of Template

Now paste it inside of ContentPlaceHolder in the Content Page as shown below:

MainPart in Content Page

Running the Website

Now you are all set to run the website. Press Ctrl+F5 to run the website.

Website Home Page

Summary

This article will help you to create an intuitive website using CSS templates in the Visual Studio. Thanks for reading and Happy Coding!!


Similar Articles