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>
<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:
<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>
<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:
.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:
<div class="header">Test Page 1</div>
Then insert this class into your style:
.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:
<div class="quote">Isn't CSS Great?</div>
Your full code should now look like this:
<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>
Now you have a simple CSS page with a header.
---
Part 2 of my tutorial will explain the basics of adding a CSS navigation menu, and a simple content area. Stay tuned! :D
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>
<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:
<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>
<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:
.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:
<div class="header">Test Page 1</div>
Then insert this class into your style:
.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:
<div class="quote">Isn't CSS Great?</div>
Your full code should now look like this:
<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>
Now you have a simple CSS page with a header.
---
Part 2 of my tutorial will explain the basics of adding a CSS navigation menu, and a simple content area. Stay tuned! :D