Introduction

With the recent amounts of WYSIWYG programs available, knowing actual hardcode is coming less and less of a need-to -know. In this tutorial on CSS I’m going to walk you through the basics of CSS. The objective of this is to teach you to know it short hand and for you to not have to use those programs religiously, even though they help.

CSS, Cascading Style Sheets are used for theme basing. Basically you use them to color, and maneuver objects on the page. That’s it. There isn’t much hard coding that goes into this other than colors of specific things, section placements, and where you want something placed.

There are two types of ways to incorporate CSS into your HTML document. You can use an internal incorporation where you just place the coding directly into your page. This is sometimes good for smaller webpages but for something big like Instablogs, it’s no good. This is because if you do this you would have to copy over all the CSS to every page you want that CSS code to apply. Another, easier way, to go about CSS incorporation is to make an external CSS document. There is no code difference, only in that you just make a separate document and link that document to your HTML page. For example it would look something like this;

(See bottom note for real code)

Oh course like any other HTML component this item must be placed within the folder where all your other documents are kept. For this CSS, we will be using the external version of CSS. This is to save time and effort for making a HTML component. Also you may notice there probably won’t be many pictures and that is because there won’t be anything to show using external unless I link it. I may link a few complicated parts just to show you what happens. But to incorporate all the codes into one document is like trying to throw 10 pounds of apples in a 2 pound limit basket.

Another reason to use CSS is the enormous flexibility it ensures. If you just use straight HTML, which is possible, and design a site that way, you are looking at a LOT of hard code. That is if it is a decent site, say something like MPN or even GameSpot all use CSS layouts. This not only makes your site look prettier but makes it more efficient to change.

If you were to move navigation on a normal HTML site, say a 50 page site, it would take at least an hour to move all that information. That isn’t even include reuploading it to the server and making sure you didn’t miss a page or screw a tag up. But with CSS you can use one simple tag to position your navigation bar. Say you wanted to move your navigation bar from the left side and move it to the right side the simple code would be;

#Navigation
{
Float: Right
}

With that simple code inserted, instead of;

#Navigation
{
Float: Left
}

You just moved 50 pages navigation bar from the left to the right by changing a 4 letter word thus saving you hours of work.

Application and Integration

When you use CSS, there is a simple format which you must follow. Although an external is much easier to use, you still must provide headings so there is a short cut when you are naming things. I will make this all clear in a moment.

Before when I used the Navigation example, you noticed I said “#Navigation”. That is the title for what its applied to. So where ever my navigation is on my HTML document, I would simply link that section to my CSS document by using this code;

div id=”navigation” /div (This code was without Carrots, gave me too much trouble)

Everything between the id codes will be subjected to the CSS codes within the area under “#Navigation”. So in this case the things under the div id will all be floated to the right side of the page. Do you understand now? Everything still applies from HTML. Think of CSS as the styling agent of HTML. It makes things look neat and pretty for people to look at. It also makes things easier for you.

Format

For the format of the CSS, it must all be labeled in this way;

#Main
{
Some Code: Code;
Some Code: Code
Some Code: Code;
}

#Footer
{
Some Code: Code;
Some Code: Code;
Some Code: Code;
}

We have already established what the “#Main” are. So now onto the brackets. These just establish that everything under them is going to be part of “#Main”. So whatever code you put between these brackets is going to appear in the section you deem “Main”. This could be the middle of your page, or just the main area for text. But whatever it is, the stuff between those brackets will appear there. As for the code in the brackets, they will be followed by a colon and what part of that code you will use. For example;

#Main
{
font: 13px Arial, Helvetica, sans-serif;
}

As you can see, font will probably be the one code you use the most. Also codes for the same application will be followed by a coma and between applications you will end will a semi-colon. This is to show the end of that particular application. That is it! That is for formatting, integration, and applying CSS to your HTML. My next Part will be on different Font codes, Size codes and some other basic codes. Stay tuned for Part 2 of the 3 Part series on My CSS Tutorial. Thanks for the Brad for looking over the content and Atul for giving me the idea of doing the tutorial in parts.

In part two we will go over how to integrate the code into the HTML and the most basic of commands to help you with your CSS coding. I will also include some programs to use so you can apply your CSS coding with a little bit of help since this is a broader ship.

Note: Please take down that there are some codes that I needed to alter so that they would not occur on this page. So I inserted “-” in the code so that they wouldn’t work. Each time I add a code that would mess up and not appear, I’ll add one of those — to it so you will be able to see the code. Just remove that and thats your code. Or I just take out the carrots to make the code open and not complete.