How to add CSS Template in ASP.Net Master Page

In this article, I shall teach you how to add CSS template in Asp.net Master Page. CSS Template makes our website very attractive. So let’s go to learn our step by step tutorial.

Step 1: Start a Microsoft Visual Studio 2010 Professional.

Step 2: Create a New website project. 

Step 3: Download CSS Template

Step4: Extract the CSS Template Zip Folder. Template files look like this.

Step 5: Select the template script folder and copy the script files like this.

Step 6: Now go to our website project . In solution explorer right-click on script folder and paste the script files in it. Look the view below.

Step 7: Select the CSS Styles files from template style folder and copied all files. Look the view below.

Step 8: Again go to the website project. In solution explorer right-click on style folder and paste the CSS files in it.

Step 9: Copy the image folder from the template folder. In solution explorer right-click on website project name and paste the image folder in it.

Step 10: Right Click on website project name>Add New item.

Step 11: Select master page from the menu. And write the name of master page. And click on add button. A master page is added in your project.

Step 12:Excluding the first line of master page. Select the remaining html code of the master page.

Step 13: Remove the selected html code from master page. 

Step 14:Select the html source file from template folder and open it in notepad text editor.

Step 15:Select the complete html code from template webpage source file. And Copy the complete source code.

Step 16:Now select the master page.

Step 17: Paste the html code in master page.

Step 18: Select master page design view mode. And look the view.

Step 19: Select the Element tag from design view that you want to delete. And press delete key from keyboard.

Step 20: After deleting the unwanted element of webpage the final view like this.

Step 21: Add content placeholder in template. A message box appear and press yes.

Step 22: Add a webpage in the project .Select the master page from check box. And click add.

Step 23: Select the master page and click ok

Step 24: Webpage is added in your project. Go into design view of webpage. And add some text in contentplaceholder.

Step 25: Start debugging. A Confirmation message box appear and click ok.

Step 26: Look the final result in browser.

Hope this will help you.