How to Create Web Page Templates Using CSS
Creating the basic files for a web page that you can use over and over again keeps web design simple and efficient. "Template" refers to elements already set up that you apply your own content to in the design. A basic web page is a one-column page with text formatting. This tutorial will show you how to set up a basic web page template. You can expand on this idea to create all kinds of web designs for your site.
Other People Are Reading
Instructions
-
-
1
Create two new files in your text editor. Name the first one index.html and the second one style.css. The first is your web page; the CSS file is your style sheet that will tell the HTML elements how to behave.
-
2
Type the following into your HTML file.
<html>
<head>
<title>A Page</title>
</head><body>
</body>
</html>This is the basic structure of an HTML file. These tags tell the browser where to look for the page content (between the body tags) and where to look for the page information (between the head tags).
-
-
3
Add div tags with IDs to your HTML file. IDs tell the browser where to look in the CSS file for the style elements. For styling content you enclose the content in div tags.
<html>
<head>
<title>A Page</title>
</head><body>
<div id="column">
<h1>Header</h1>
</div>
<div id="main">
This is text.
</div>
</body>
</html>The h1 tag denotes heading text and it is by default larger than normal text.
-
4
Link your HTML file to your CSS file. You only need to add a link tag to the head section.
<html>
<head>
<title>A Page</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>This tells the browser where to find the CSS file.
-
5
Add elements to your CSS file. In your CSS file, add styles for each element you want to effect in your HTML file. Type the following:
body{}
#column {}
h1 {}
#main {}
You can style tags and IDs in your CSS file. To style IDs you need to add a # before the name of the ID.
-
6
Add styles to your elements in your CSS file. While there are many styles you can use, here are a few basic ones that will turn your page into a single-column web page. Start with the body tag.
body{
margin: 0;
padding:0;
background: #000000;
font-size:12px;
color:#000000;}The margin and padding are set to 0 so the page background will cover the whole browser window. The background sets the color to black using the hex code for black. Font-size sets the size of the text for the web page and color denotes the color of the text which is also set to black.
#column {
margin: 0 auto;
width: 800px;
background: #ffffff;
}By setting the width of the column, we have created a swath of white down the middle of the page. Setting the margin to 0 auto-centers the column on the screen. The background uses the hex code for white so the text will show up on the background.
H1 {
text-align:center;}Text-align tells the text how to align on the page. In this case we chose center but you can also use left, right and justify.
#main {
padding: 20px;}Padding keeps the text from running up against the edge of the page. By adding padding, you add space between the edge of the column and the text.
-
7
Save both files.
-
1
Tips & Warnings
You can use a color-picker application to choose different colors for your web page. The color picker will give you the hex code you need.
