Using this step by step guide, you will learn from start to finish how to create a CSS style website. These detailed instructions will teach you everything you need to know to create a professional modern site!
1. In this extensive tutorial, you will learn how to create a website with a header, left and right navigation menu, content area, plus a footer all by using CSS. You will learn how to create borders, modern hover styles, and much more. In part one of this guide, I will show you how to create the header for your site. To begin, lets create a standard HTML document:
|
<html>
<head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>My First CSS WebSite</title> </head> <body> CSS Website </body> </html> |
2. Save this as mysite.html, and open it in your web browser. As you can see, it is very simple. It currently is very blank, and says CSS Website at the top. Now it is time to add our CSS Styles to our site. In your header tag, insert the following:
|
<style type="text/css" media="all">
body { margin: 0; padding: 0; color: #000; background-color: #FFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; } </style> |
3. In this piece of code, we just laid down some of the basics. This code tells everything in the body of our site 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 Verdana. Our 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>My First CSS WebSite</title> <style type="text/css" media="all"> body { margin: 0; padding: 0; color: #000; background-color: #FFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; } </style> </head> <body> CSS Website </body> </html> |
4. Thats not so hard. Now its time to make a header! Insert the following class into your current style:
|
.header {
background-color: #9A060B; color: #FFF; font-size: 24pt; font-weight: bold; padding: 5px; border-bottom: 1px solid #000; } |
5. Apply this class to the text in our site that says "CSS Website" by inserting the following:
| <div class="header">CSS Website</div> |
6. Now insert the following 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; } |
7. Below the line with your "CSS Website", type the following:
| <div class="quote">Because CSS is Awesome</div> |
8. Your 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>My First CSS WebSite</title> <style type="text/css" media="all"> body { margin: 0; padding: 0; color: #000; background-color: #FFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; } .header { background-color: #9A060B; 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">CSS Website</div> <div class="quote">Because CSS is Awesome</div> </body> </html> |
9. Save your site, and open it in your internet browser. Your site should now look like this:
10. Of course, the quote will be on the far right of your site (I shortened my version so that it loads faster. Lets continue to the next part of this CSS Tutorial which will teach you how to make a left navigation menu!
Continue to Part 2 of Designing a CSS Website
More HTML and CSS: 
