-
[Tutorial] CSS Basics
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>
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
-
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 :p):
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.
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! :D
-
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.
- 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>
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!
-
can you change color of text?
-
Changed the font colour :)
