Posted by: keystonelemur | November 6, 2008

CSS Based Design 101

CSS based Design 101
Before you read this you should learn HTML at http://www.w3schools.com and look up some CSS afterwords.

Tables = Data only

Look through most sites today and tell me what you see. A vast majority use a system with a bunch of div tags and *gasps!* no tables! This is called a CSS design.

Now, some of you may still be designing websites with tables and may be wondering if it’s worth it to keep reading. After all, you still can make a functioning website can’t you? The simple answer is no. Table based web design is bulky, hard to understand for beginners, and extremely inflexible to edit.

Tables in web design should be left only as data holders, not as design frames.

Tables were probably a primary way of web design for most of you. What could be more simple than making a table site in dreamweaver or an imageready slice-up in photoshop? Surprisingly CSS design is extremely easy to learn, much more so than tables. This even carries over to the extent that you need no more than notepad to make a functioning site with CSS.

Now then, some would ask what is CSS and why is it so important. CSS is short for Cascading Style Sheets. The beauty of CSS is that you can have only one html page and keep it the exact same, but it can change drastically in look based on the style sheet. Don’t believe it? Check out the marvels of css at http://www.csszengarden.com . Same html, different CSS.

CSS – basics

If you learned html quickly then CSS should be even faster. A basic CSS style would look something like this in html :

<style type=”text/css”>
body {
background: black;
color: white;
}
</style>

In this statement we have set all font to be the color white, and the background color of the page to be black. Now for the syntax of CSS.

.Class #id tag {
area:attribute;
}

Make sure to remember the semicolon on the end of the attribute, it can cause a lot of problems if you don’t.

Let’s start with the Class. A class in css is started with a . and can be used multiple times. Normally a class is used to contain areas, explained below.

Next is an ID. and ID is defined by a # and can only be used once. IDs are normally under a class.

The tag is the html attribute you wish to edit, like b, p, img, or a. It can also be nested, such as ul li.

The area is what is being called for change. A quick list to get you started :

background:black; – background color set to black (can use hex or RGB, explained later)

background-image: url(“images/image.png”); – background image

background-repeat:no-repeat; – stops the background for repeating, use repeat-x or y to get the image to repeat in one direction

font:georgia; – set the font to Georgia.

font-size:12px; – set the font size

color:white; – set the font color

margin: 5px 5px 5px 5px; – set all margins to 5px, area outside of the box font or objects are in. (order is up right down left)

padding: 5px 5px 5px 5px; – set padding to 5px, padding is how much space is inbetween the object and the container.

float:right; – float an element to the right of the scree, can also be left. (explained later)

clear:both; – clears floats so elements aren’t scattered randomly. (explained later)

width:200px; – set the width of an element.

Now you at least have a basic understanding of CSS. Now there are two ways to put a CSS style on your page, either localy on the page or embedded.

Local:

<style type=”text/css”></style>

Embed:

<link href=”style.css” rel=”stylesheet” type=”text/css” />

The beauty of embed is that the SAME sheet can be used on ALL pages making it easier to edit fonts and other items globaly without the hassle of editing every page. Simple yet extremely effective.

CSS – LAYOUTS

Now then some may still be wondering how CSS can replace tables for design. The float element. Make a new html document and a new css document in dreamweaver (or in notepad just save as all files and put .css on the end of it)

In the html document put this :

<html>

<link href=”style.css” rel=”stylesheet” type=”text/css” />

<div class=”main”>

<div id=”container”>

<div id=”header”><h1>Page title</h1></div>

<div id=”sidebarleft”>
random text! Hello world!
</div>

<div id=”content”>
more random text!
</div>

<div id=”footer”>
copywrite stuff
</div>

</div>

</html>

save it.

Now in the CSS document put this :

body  {
font: 100% Georgia;
background: #000000;
margin: 0;
padding: 0;
text-align: center;
color: #FFFFFF;
}
.Main #container {
width: 800px;
background: #FFFFFF;
margin: 0 auto;
text-align: left;
}
.Main #header {
background: #000000;
background-repeat:no-repeat;
padding: 10px 10px 10 px 10px;
}
.Main #header h1 {
margin: 0;
padding: 10px 0;
}
.Main h1 {
font-size:24px;
font-family:Georgia, “Times New Roman”, Times, serif;
}
.Main h2 {
font-size:20px;
font-family:Georgia, “Times New Roman”, Times, serif;
}
.Main #sidebar1 {
float: left;
width: 150px;
background: #FFFFFF;
padding: 15px 20px 0 0;
margin: 0 15px 0 0;
}

.Main #mainContent {
margin: 10px 15px 5px 10px;
padding: 10px 15px 5px 10px;
}

.Main #footer {
padding: 0 10px 0 20px;
color:#FFFFFF;
background:#000000;
}
.Main #footer p {
margin: 0;
padding: 5px 0;
}

save it as style.css

Open the page. You now have a CSS base to do whatever you will with to make a website out of. Play around with a few things and see where it can take you, experimentation is the best way to learn anything.

More to come now that I have some spare time.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: