Introduction to CSS Tutorial

Made by: Nick

How to Use CSS to Format Your Site


Any capable modern day designer incorporates CSS into their site. There are still far too many designers around who learned web programming years ago, back when tables were king, and everyone used them to lay out the entire site. For these designers, it can be hard to switch from their old methods to the modern systems. Unfortunately, tables died with frames, and if you are a designer who still uses tables - or a new programmer trying to figure out the proper way to code your site - the answer lies in CSS.

Why would you want to use CSS instead of tables? Well, to start off with, CSS loads much faster than a site covered in tables. With CSS, there is significantly less bulky code, which not only improves download times, but the largest gain comes from how long it takes your browser to sift through the code. Remember, like a human reading a book, a browser has to go through every single line of code in the source, then process it into something that resembles a webpage.

Not only does CSS load faster, but proper CSS code is essential if you are at all interested in Search Engine Optimization, and CSS generally loads universally well across multiple browser platforms. Not to mention it just makes more sense - have you ever had to use blank .gif files to achieve proper spacing with tables? Sometimes it's the only way to make it work!

CSS can even save you money in hosting costs if you have a high traffic site, due to reduced overall bandwidth consumption. Let's say a user accesses 10 of your subpages that are coded in HTML. Each time they open a page, that entire page is downloaded - not just the relevant content. Every single line of the layout is obtained each time the page is opened. With CSS, the layout is downloaded once, and then for the other 9 pages, just the factual information (the text and new images) are obtained. You can see how quality CSS coding can reduce your bandwidth useage.

Now, let's get into the nitty-gritty. CSS stands for Cascading Style Sheets, and true to its name, CSS simply flows from one point to the next - avoiding redundant code by referencing an external style sheet, often called style.css. CSS is not an incredibly complicated skill to learn, but like any web programming, it does have a learning curve that can seem a little daunting the very first time you do it. Because of that, it could be wise to start off with a template and modify it to your needs. Even if you end up rewriting practically the entire template, that is a great way to quickly discover the structure of CSS, and how changing one simple line of code can make every page on your entire site look different.

Let's take a look at some sample CSS attributes:

You'll want to open your style sheet file with:

<style type="text/css">

This lets the browser know what it's dealing with. Likewise, when the code is finished, simply close the file with:

</style>

Now, what goes in your style sheet? Here are some examples. For instance, to make a hyperlink only underlined when the mouse is over it:

<style type="text/css">
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:active {text-decoration: none}
a:hover {text-decoration: underline; color: blue;}
</style>


You can also edit the other link formats, depending on how you want them to appear.

Classes


Now, let's take a look at classes. These are predefined blocks of code you can then call upon at a later time.

.green{font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #00FF00;text-decoration: none;}

This is a sample of a class called "green". You can now reference this class on any page of your site to implement this code. For example, if you place <p class="green"> on any page of text using this style sheet, that CSS class will be referenced when the browser renders the text.

You will grow to love how CSS styles can be changed by editing one simple file, and that is the first place you should start when designing your CSS layout. With an editing program such as Dreamweaver, your life is made much easier than coding it all by hand. Dreamweaver can actually take your HTML-based site and switch it to CSS, with minimal work on your part.

In Dreamweaver:


  • Open up one of the pages from your existing site.
  • With your pre-designed page open, click Window and then click on CSS Styles. If you click on New CSS Style (under the plus sign icon), you will be greeted with a window.
  • Under selector type, select "Class". Go ahead and enter a style name while you're at it.
  • Now, you can use the Tag Selector Type and Advanced Selector Type to help convert your HTML entries to CSS.
  • When you're done, in a New Style Sheet, name your style and save it to your root directory.
  • Another window will appear where you can enter your attributes to finish the job.

Feed the Dragon MySpace Tutorials