Course Content

Course Content

Template Create With HTML and CSS

Create Template with HTML and CSS in Wordpress

 

In today's video we are going to create template with HTML and CSS for Wordpress.

The format in which we are going to create a word template is first Header, after that Menu, then div and then after Image.

So to create template we will first go to template's HTML folder and open one new notepad. We will save that notepad as 'design.html'.

After this we will edit in that notepad to create template. So for that we will add the following HTML coding :

<html>

<head>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="header1">

Header

</div>

<div id="menu">

<ul>

<li><a href="">First Page</a></li>

<li><a href="">Second Page</a></li>

<li><a href="">Third Page</a></li>

<li><a href="">Fourth Page</a></li>

</ul>

</div>

<div id="content1">

Content

</div>

<div id="footer1">

</div>

</body>

</html>

We will also need to add the CSS file to provide certain properties. Therefore the following code we need to add to our CSS file named as 'style.css' :

#header1

{

height:150px;

width:500px;

background-color:black;

margin:0 auto;

color:red;

}

#menu

{

height:30px;

width:500px;

background-color:blue;

margin:0 auto;

color:red;

}

#content1

{

height:30ppx;

width:500px;

background-color:yellow;

margin:0 auto;

color:red;

}

#menu li

{

display:inline;

}

#menu ul

{

margin:0 auto;

}

#menu a

{

color:white;

}

#footer1

{

height:100px;

width:500px;

background-color:black;

margin:0 auto;

color:red;

}

FAQs

Recommended Courses

Share With Friend

Have a friend to whom you would want to share this course?

Download LearnVern App

App Preview Image
App QR Code Image
Code Scan or Download the app
Google Play Store
297K+ Downloads
App Download Section Circle 1
4.5 Rating
App Download Section Circle 2
10K+ Reviews
App Download Section Circle 3
  • Learn anywhere on the go
  • Get regular updates about your enrolled or new courses
  • Share content with your friends
  • Evaluate your progress through practice tests
  • No internet connection needed
  • Enroll for the webinar and join at the time of the webinar from anywhere