cs480 - Presentation

·Introductin to CSS·
CSS stands for cascading style sheets, and is a powerful part of the internet today. When using any kind of web-based media, CSS can not be overlooked. The first thing for CSS is the inclusion of an important tag. The tag:

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

Needs to be included in between the <head> </head> tags of the html document you would like the CSS to appear on. The href attribute should point to the where the css file will be stored.

·Picking a Color Scheme·
When picking a color scheme the number one thing to keep in mind is your viewer. You want to pick colors that are going to be pleasing to look at. Most of choosing colors is personal preference, but a good color scheme and make or break a site's design. Let's look at some examples:

		-my e-com site
		-my e-com site

·Constructing your Table·
I am going to demo a simple but neat looking table that I came up with. It is easy to change the design to suit your taste. Please feel free to play around with these designs.

There are a few different ways to reference your CSS file from your html document. I am going to use the 'class' approach, which seems to be the most popular approach today. If you would like to see the other methods, they are well documented on most comprehensive CSS development pages.

To reference your style sheet you will need to include a class attribute in your <table> tag, and in this example in your <td> tag also. For example if you have a style sheet with that looks like this:

table.table1
{ text-align: left;
font-family: Verdana;
font-weight: normal;
font-size: 11px;
color: #005a00;
background-color: #def0de;
border: 1px #005a00 solid;
border-collapse: collapse;
border-spacing: 0px;}

.tableHd
{ border-bottom: 2px solid #005a00;
background-color: #b6ebb8;
text-align: left;
font-family: Verdana;
font-weight: bold;
font-size: 11px;
color: #005a00;}

Your tags for your table would look like this:

The table that was created from this:

Sticky Note style Table

This is the table that was used on my E-commerce site. It is easy to make and easy to understand.

Here is the same table with one of our other color schemes:

alternate sticky style table

the table is r-r-r-r-Royal blue!

·Tables are Devil!·
There is an alternative to using tables, combine with CSS, to arrange a page. This is by using only CSS and using the <div> tag for most of the divisions in the text. This method is gaining popularity, and could be the normal way of making nice looking pages in the near future. A couple of authors are of the opinion that "tables are dead!" These authors have created a few good websites that explain the ins and outs of getting rid of your tables. An example of such a page is this page. It was taken from a site called Blue Robot. A couple of links are listed below (although the sites are little dated, the information is still quite valid):

Blue Robot
Glish
Jeff Zeldman (site is pretty up-to-date)

·I say good day to you!·