[Tutorial] CSS Basics

**enegue** · 09-01-09, 11:23 PM

This tutorial will help you to understand basic CSS, how it works, and how you can use to it create a very nice looking site. This guide will make a lot more sense if you have a basic undertanding of HTML. This guide was written by me during my trial period as a Coding Team Member on Surreal Designs. I had to prove my worth in three programming languages, I chose CSS, PHP, and HTML. Anyways I hope this tutorial helps to explain a little bit about how css works, and how people are making their own simple websites from scratch -- all that is needed is notepad.

In this tutorial, you will learn how to create a webpage in CSS which includes:

A header
Left/right navigation menu
Content
And a footer

This part of the tutorial will teach you how to make a basic header for your page.

First, we want to create a header for your site. To start, lets create a standard HTML document:
HTML Code:
```
<html>
<head>
<title>Test Page</title>
</head>
<body>
Test Page 1
</body>
</html>
```
Save this as test1.html, and open it in your web browser. As you will notice, it's very simple. It currently looks like a basic, un-edited html page, and says "Test Page 1" in the body. Now we want to add CSS to the page. In the header tag, insert the following:
HTML Code:
```
<style type="text/css" media="all">
body {
margin: 0;
padding: 0;
color: #000;
background-color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
}
</style>
```

This code makes the body of this page to have a margin of 0 (no spacing along the sites of our site), no padding, our default text color to be black (#000), our background color to be white (#FFF), and our default font to be Arial. The full code should now look like this:

HTML Code:

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Test Page</title>
<style type="text/css" media="all">
body {
margin: 0;
padding: 0;
color: #000;
background-color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
}
</style>
</head>
<body>
Test Page 1
</body>
</html>

Now its time to make the header. Create the following class, and insert it into your current style:

HTML Code:

.header {
background-color: #000;
color: #FFF;
font-size: 24pt;
font-weight: bold;
padding: 5px;
border-bottom: 1px solid #000;
}

Apply this class to the text in our site that says "Test Page 1" by inserting the following tags:
HTML Code:
```
<div class="header">Test Page 1</div>
```

Then insert this class into your style:

HTML Code:

.quote {
width: 100%;
background-color: #EEE;
color: #000;
font-size: 8pt;
font-weight: bold;
padding: 2px;
border-bottom: 1px solid #000;
text-align: right;
}

Below the line with your "Test Page 1", insert the following class into your current style:
HTML Code:
```
<div class="quote">Isn't CSS Great?</div>
```

Your full code should now look like this:

HTML Code:

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Test Page</title>
<style type="text/css" media="all">
body {
margin: 0;
padding: 0;
color: #000;
background-color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
}
.header {
background-color: #000;
color: #FFF;
font-size: 24pt;
font-weight: bold;
padding: 5px;
border-bottom: 1px solid #000;
}
.quote {
width: 100%;
background-color: #EEE;
color: #000;
font-size: 8pt;
font-weight: bold;
padding: 2px;
border-bottom: 1px solid #000;
text-align: right;
}
</style>
</head>
<body>
<div class="header">Test Page 1</div>
<div class="quote">Isn't CSS Great?</div>
</body>
</html>