HTML/CSS Stylesheet Tutorial
 by AkenaDesign

1.

HTML

To create a new web page I always start with my HTML 5 template and fill in the blanks.

In this case I fill in the author name, title, keywords, description, and style sheet location.

I find it easiest to define the page space using a div layer. In this case the div has the class equals "page". This allows me to define styles for the page content.

CSS

I create my style sheet with some basic default settings. By default, elements will have 0px margins and padding.

Here I also set up background color for the page and align content between the body tags to be centered.

I define the page class div width backgrounds and set the text alignment. In this example, I use 600px to fit the frame to the right. Typically I reccomend 960px as a web page width.

The page div will be centered but content within the div will align left.

© 2011 Akena Design. All Rights Reserved. 

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
<!DOCTYPE html>
<html>
<head>
  <!-- Site Design and Progamming by Ken Johnson -->
  <meta charset=utf-8 />
  <title>Where are the Lincoln Cabs?</title>
  <!--[if IE]>
  <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  
  <!-- Favicon -->
  <link rel="shortcut icon" href="favicon.ico">
  
  <!-- Meta -->
  <meta name="KEYWORDS" content="downtown, lincoln ne, cab, taxi, ride home, safe ride,">
  <meta name="DESCRIPTION" content="Our goal at wherearethelincolncabs.com 
                 is to lower the incidence of drunken driving and provide Lincolnites 
                 with proper transportation into the evening hours, through a safe, 
                 economical, efficient taxi or public transportation service.">
  <meta name="ROBOTS" CONTENT="index, follow">
  <meta name="REVISIT-AFTER" CONTENT="1 Week">
               
  <!-- Stylesheets -->
  <link rel="stylesheet" href="includes/style1.css">
  <!-- http://jquery.com/ -->
</head>
<body>
<div class="page">
               Where are the Lincoln Cabs?
</div>
</body>
</html>

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
/********************************************************************************
 Tutorial CSS Stylesheet
 Title: Where are the Lincoln Cabs
 Author: Ken Johnson
 Created 1/13/2011
*********************************************************************************/

*{margin:0; padding:0;} /* clear all default CSS */

body {
 background-color: #2b2b2b;
 text-align:center;
 }
.page{
 width: 600px;
 margin: auto;
 background-color: #fff;
 text-align: left;
 }