Beginner's CSS Guide

Kronix · 12-18-2007, 04:18 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 undestanding 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.

Note: This tutorial will show you how to embed the CSS into the html document since this tutorial only contains one page. CSS becomes even more useful with mutiple page websites since you can make one CSS file with all of the CSS Styles which will cover all of the html pages specified instead of having to add them to each page. This might be a confusing concept to anyone who has never worked with CSS but I can assure you it makes the job much easier. Anyways, like I said, for now you will be learning how to embed the CSS code to make a single webpage with CSS.

---

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>

You now you have a simple CSS page with a header which looks like this:
[attachment=26:Testpage1.html]

---

Part 2 of my tutorial will explain the basics of adding a CSS navigation menu, and a simple content area. Stay tuned!

Kronix · 12-18-2007, 04:19 PM

Part 2 of my tutorial will explain the basics of the menu and content area. Please take a look at Part 1 before continuing with this tutorial.

---

Insert the following classes into your CSS Styles:

HTML Code:

table#main {
height: 100%;
vertical-align: top;
}
table#main td {
vertical-align: top;
}
td.leftnav {
background: #666;
width: 175px;
border-right: 1px solid #000;
padding: 0px;
color: #FFF;
font-size: 10px;
text-align: center;
}

td.leftnav div.header {
background: #000;
color: #FFF;
padding: 3px;
border-bottom: 1px solid #000;
font-size: 12px;
font-weight: bold;
text-align: center;
}

td.leftnav div.menu {
background: #666;
padding: 0px;
border-bottom: 1px solid #000;
}

td.leftnav div.menu a {
display: block;
padding: 2px;
margin: 0px;
font-size: 10px;
color: #FFF;
border-style:none;
text-align: left;
}

td.leftnav div.menu a:hover {
background: #999;
color: #FFF;
text-align: left;
}

Our full code should now look like this (remember to edit hex codes and text as you see fit

):

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 1</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;
}
table#main {
height: 100%;
vertical-align: top;
}
table#main td {
vertical-align: top;
}
td.leftnav {
background: #666;
width: 175px;
border-right: 1px solid #000;
padding: 0px;
color: #FFF;
font-size: 10px;
text-align: center;
}

td.leftnav div.header {
background: #000;
color: #FFF;
padding: 3px;
border-bottom: 1px solid #000;
font-size: 12px;
font-weight: bold;
text-align: center;
}

td.leftnav div.menu {
background: #666;
padding: 0px;
border-bottom: 1px solid #000;
}

td.leftnav div.menu a {
display: block;
padding: 2px;
margin: 0px;
font-size: 10px;
color: #FFF;
border-style:none;
text-align: left;
}

td.leftnav div.menu a:hover {
background: #999;
color: #FFF;
text-align: left;
}

</style> </head> <body> <div class="header">Test Page 1</div> <div class="quote">Isn't CSS Great?</div> <table cellspacing="0" id="main"> <tr> <td class="leftnav"> <div class="header">Menu 1</div> <div class="menu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> </div> <div class="header">Menu 2</div> <div class="menu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> </div> <div class="header">Menu 3</div> <div class="menu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> </div>
Add some news, updates, or possibly insert some affiliates or links.
</td> </tr> </table> </body> </html>

Next, we will add a simple content area to the page. Insert the following into the styles:

HTML Code:

td.content {
width: auto;
padding: 0px 5px 5px 5px;
font-size: 10px;
}
td.content div.title {
background-color: #FFF;
color: #000;
border: none;
font-size: 18px;
font-weight: bold;

After you end your cell with your left navigation menu (After the </td> tag,) start a new cell like this:

HTML Code:

<td class="content"> <div class="title">Content Header</div>
Main content goes here. Write news, articles, or any other content here.</td>

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 1</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;
}
table#main {
height: 100%;
vertical-align: top;
}
table#main td {
vertical-align: top;
}
td.leftnav {
background: #666;
width: 175px;
border-right: 1px solid #000;
padding: 0px;
color: #FFF;
font-size: 10px;
text-align: center;
}

td.leftnav div.header {
background: #000;
color: #FFF;
padding: 3px;
border-bottom: 1px solid #000;
font-size: 12px;
font-weight: bold;
text-align: center;
}

td.leftnav div.menu {
background: #666;
padding: 0px;
border-bottom: 1px solid #000;
}

td.leftnav div.menu a {
display: block;
padding: 2px;
margin: 0px;
font-size: 10px;
color: #FFF;
border-style:none;
text-align: left;
}

td.leftnav div.menu a:hover {
background: #999;
color: #FFF;
text-align: left;
}
td.content {
width: auto;
padding: 0px 5px 5px 5px;
font-size: 10px;
}
td.content div.title {
background-color: #FFF;
color: #000;
border: none;
font-size: 18px;
font-weight: bold;
}
</style> </head> <body> <div class="header">Test Page 1</div> <div class="quote">Isn't CSS Great?</div> <table cellspacing="0" id="main"> <tr> <td class="leftnav"> <div class="header">Menu 1</div> <div class="menu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> </div> <div class="header">Menu 2</div> <div class="menu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> </div> <div class="header">Menu 3</div> <div class="menu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> </div>
Add some news, updates, or possibly insert some affiliates or links.
</td> <td class="content"> <div class="title">Content Header</div>
Main content goes here. Write news, articles, or any other content here.</td> </tr> </table> </body> </html>

You now have a basic page which has a Header, Menu, and Content area that looks like this:
[attachment=27:testpage2.html]

---

Part 3 of my tutorial will explain how to add a Right Menu, and a Footer to the page and finish it off. Stay tuned!

Kronix · 12-18-2007, 04:19 PM

Part 3 of my tutorial will explain how to add the Right Menu, and finish off the page with the Footer. Please take a look at Part 1 and Part 2 before continuing on with Part 3.

---

The Right Menu is almost exactly the same as the left menu, which makes this part of the tutorial very simple. Insert the following classes into the styles:

HTML Code:

td.rightnav {
background: #9D4631;
width: 175px;
border-left: 1px solid #000;
padding: 0px;
color: #FFF;
font-size: 10px;
text-align: center;
}

td.rightnav div.header {
background: #BD1219;
color: #FFF;
padding: 3px;
border-bottom: 1px solid #000;
font-size: 12px;
font-weight: bold;
text-align: center;
}

td.rightnav div.menu {
background: #9B2E1B;
padding: 0px;
border-bottom: 1px solid #000;
}

td.rightnav div.menu a {
display: block;
padding: 2px;
margin: 0px;
font-size: 10px;
color: #FFF;
border-style:none;
text-align: center;
}

td.rightnav div.menu a:hover {
background: #C58873;
color: #FFF;
text-align: center;
}

Now add the following (basically exactly the same as the left menu to start with -- you can add whatever you want into there though, this is just a guideline,) after the final content cell:

HTML Code:

<td class="rightnav"> <div class="header">Menu 1</div> <div class="menu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> </div> <div class="header">Menu 2</div> <div class="menu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> </div> <div class="header">Menu 3</div> <div class="menu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> </div> <br>
Add some news, updates, or possibly insert some affiliates or links.
</td>

You now have a basic page which has a Header, Left and Right Menus, and Content area which looks like this:
[attachment=29:testpage3.html]

The hardest part of the code is now over. Now to finish it all off by adding a footer to the code. Insert this final class into your styles:
HTML Code:
```
.footer {
background-color: EEE;
border-top: 1px solid #000;
padding: 5px;
text-align: center;
font-size: 10px;
}
```

Now look for the </table> tag, and add the following after that:

HTML Code:

<div class="footer">Copyright 2006 -- Kronix of <a href="http://www.Surreal-Designs.net">Surreal-Designs</a> </div>

That's it -- you've just finished a very simple to make webpage using CSS. Your finished code should 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 1</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;
}
table#main {
height: 100%;
vertical-align: top;
}
table#main td {
vertical-align: top;
}
td.leftnav {
background: #666;
width: 175px;
border-right: 1px solid #000;
padding: 0px;
color: #FFF;
font-size: 10px;
text-align: center;
}

td.leftnav div.header {
background: #000;
color: #FFF;
padding: 3px;
border-bottom: 1px solid #000;
font-size: 12px;
font-weight: bold;
text-align: center;
}

td.leftnav div.menu {
background: #666;
padding: 0px;
border-bottom: 1px solid #000;
}

td.leftnav div.menu a {
display: block;
padding: 2px;
margin: 0px;
font-size: 10px;
color: #FFF;
border-style:none;
text-align: left;
}

td.leftnav div.menu a:hover {
background: #999;
color: #FFF;
text-align: left;
}
td.content {
width: auto;
padding: 0px 5px 5px 5px;
font-size: 10px;
}
td.content div.title {
background-color: #FFF;
color: #000;
border: none;
font-size: 18px;
font-weight: bold;
}
td.rightnav {
background: #666;
width: 175px;
border-left: 1px solid #000;
padding: 0px;
color: #FFF;
font-size: 10px;
text-align: center;
}

td.rightnav div.header {
background: #000;
color: #FFF;
padding: 3px;
border-bottom: 1px solid #000;
font-size: 12px;
font-weight: bold;
text-align: center;
}

td.rightnav div.menu {
background: #666;
padding: 0px;
border-bottom: 1px solid #000;
}

td.rightnav div.menu a {
display: block;
padding: 2px;
margin: 0px;
font-size: 10px;
color: #FFF;
border-style:none;
text-align: center;
}

td.rightnav div.menu a:hover {
background: #999;
color: #FFF;
text-align: center;
}
.footer {
background-color: EEE;
border-top: 1px solid #000;
padding: 5px;
text-align: center;
font-size: 10px;
}
.footer {
background-color: EEE;
border-top: 1px solid #000;
padding: 5px;
text-align: center;
font-size: 10px;
}
</style> </head> <body> <div class="header">Test Page 1</div> <div class="quote">Isn't CSS Great?</div> <table cellspacing="0" id="main"> <tr> <td class="leftnav"> <div class="header">Menu 1</div> <div class="menu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> </div> <div class="header">Menu 2</div> <div class="menu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> </div> <div class="header">Menu 3</div> <div class="menu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> </div>
Add some news, updates, or possibly insert some affiliates or links.
</td> <td class="content"> <div class="title">Content Header</div>
Main content goes here. Write news, articles, or any other content here.</td> <td class="rightnav"> <div class="header">Menu 1</div> <div class="menu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> </div> <div class="header">Menu 2</div> <div class="menu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> </div> <div class="header">Menu 3</div> <div class="menu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> </div> <br>
Add some news, updates, or possibly insert some affiliates or links.
</td> </tr> </table> <div class="footer">Copyright 2006 -- Kronix of <a href="http://www.Surreal-Designs.net">Surreal-Designs</a> </div> </body> </html>

And your finished page should look like this:
[attachment=28:FinalProduct.html]

Note: I had to set my content area's width to 700px in the example page, as I did not have enough text in there for it to extend along the whole page. If you put enough text in there, it will automatically align it correctly. You will only run into problems if your centent's text area has lower than 700px worth of words. In that case change the:

HTML Code:

td.content { width: auto;

to

HTML Code:

td.content { width: 700px;

---

I hope this helped. Enjoy!

12-18-2007, 04:18 PM	#1
Kronix Smurf Join Date: Dec 2007 Posts: 13	Beginner's CSS Guide 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 undestanding 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. Note: This tutorial will show you how to embed the CSS into the html document since this tutorial only contains one page. CSS becomes even more useful with mutiple page websites since you can make one CSS file with all of the CSS Styles which will cover all of the html pages specified instead of having to add them to each page. This might be a confusing concept to anyone who has never worked with CSS but I can assure you it makes the job much easier. Anyways, like I said, for now you will be learning how to embed the CSS code to make a single webpage with CSS. --- 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> You now you have a simple CSS page with a header which looks like this: [attachment=26:Testpage1.html] --- Part 2 of my tutorial will explain the basics of adding a CSS navigation menu, and a simple content area. Stay tuned! __________________ VPSpub.com Get Paid to Post! Make Money Quick Referral Contest Open - Cash Prizes via paypal

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
My frist css - Did I do it right?	wwe9112	CSS	10	12-16-2007 06:33 PM
CSS Tutorial	fire_lady	Web Development	6	02-09-2007 02:34 AM
How to use css.	pigeon	CSS	6	01-02-2007 08:15 AM
Beginner's Guide to Getting Into Search Engines	webmaven	Advertise your website	0	08-15-2006 10:31 PM
Talk CSS - Website Design (CSS Primarily) Community	compuXP	Advertise your website	2	06-16-2006 04:08 PM

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)