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!!