CSS
This is one of the fun but most time consuming tasks to tableless web design. For you to have a CSS file that will style your site the way you want it you need to have decided which layout type you are going to use. The best one to use is the tableless one (div tags). To get started you should have a document like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
</div>
</body>
</html>
Your next step is to start to fill out where you want what. the position of the navigation can be where ever you want it to be, in this case the navigation is going to site above the content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example of a tabless design </title>
</head>
<body>
<div id="container">
<div id="navigation">
<ul>
<li><a href="#" title="home">home</a></li>
<li><a href="#" title="home">about</a></li>
<li><a href="#" title="home">gallery</a></li>
<li><a href="#" title="home">contact</a></li>
</ul>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
</div>
</div>
</body>
</html>
Note: always make sure that you close of each div after each section. The only one that should be closed at the end is the container tag. You can see from the above that for example after the navigation is </div> which shows that the navigation division stops there.
Ok the next step is to decide which way you want to add the CSS in. You can either add it into the current document or you can attach it to the document and place all of your css code in its own little file. For me the easiest way and the way that I normally do things is to attach the file. That way you only have to open up one file to change the styling and not have to open the pages of the files you want to change. With Css providing that you have labeled what you want it doesnt matter where the item is or on what page you can target just that and style it how you like.
The css below is in pink to make it easier to see from all the other html. Once I have shown you the two documents I will explain what each one is and what they do. Don't worry about whats there at the moment this is purely an example to show you, for now. We will come back to these later on.
Adding it to the current document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example of a tabless design </title>
<style type="text/css">
<!--
body {
background-color:#FFFFFF;
color:#333;
font:100%/1.45 Helvetica, Arial, Verdana, sans-serif;
margin:0;
padding:0;
text-transform:lowercase;
}
#content {
width: 500px;
margin-left: 0 auto 0 auto;
padding: 5px;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="navigation">
<ul>
<li><a href="#" title="home">home</a></li>
<li><a href="#" title="home">about</a></li>
<li><a href="#" title="home">gallery</a></li>
<li><a href="#" title="home">contact</a></li>
</ul>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
</div>
</div>
</body>
</html>
having a seperate style sheet
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example of a tabless design </title>
<link href="screen.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="navigation">
<ul>
<li><a href="#" title="home">home</a></li>
<li><a href="#" title="home">about</a></li>
<li><a href="#" title="home">gallery</a></li>
<li><a href="#" title="home">contact</a></li>
</ul>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
</div>
</div>
</body>
</html>
The main difference with this is that for a start it saves space in the main file. You simply link it to a .css style sheet and place all of your css in there with no html. the example below is of a css only .css file.
/* CSS Document */
body {
background-color:#FFFFFF;
color:#333;
font:100%/1.45 Helvetica, Arial, Verdana, sans-serif;
margin:0;
padding:0;
text-transform:lowercase;
}
#content {
width: 500px;
margin-left: 0 auto 0 auto;
padding: 5px;
}
/* end of css */
What you need to know for learning CSS Basics
There are a lot of things to learn if you want to start to design using CSS. Like HTML the CSS code itself is farily simple. For a background you type background: and so on. I´ll explain a few of these below and list the most basic ones that you will come across when wanting to design using this CSS tableless design. The first things you need to learn are Targeting the right areas on the site.
For me this is the first step that you should learn for CSS designing. Targeting the right areas is simple, providing that you understand enough HTML to implement this step. Examples are shown above, but we will break this down step by step to show you what does what and the basic commands you will need. A good way of learning, but I suppose a bit lazy way, is to use a program like Dreamweaver that will give you prompts on coding options available to you. So for example if I was to do <p this would then generate a pop-up list of options for the "P" tag, like align, class, id and so on. We will cover this a bit later.
© Matthew Hillman 2006/7 | Apple Gate Studios
