Integrating Cascading Stylesheets Into a Webpage

The absolute beginner needs to know a few things about CSS- namely, how to define that Cascading Stylesheet, and also how to attach or imbed it into your document. If you don't even know what CSS is or what it's used for you should read this.

You can define your stylesheets:
1. Inside the page you're working on
2. Externally, and linked to the page you'd like
3. In each element you want styled

The easiest, and least complicated way to define a stylesheet is right in your document. This, of course like anything else, has various limitations. For instance, if you want all those same styles in another document you're going to have to find them in the original document and copy and paste them into the new one, every single time. And if you have a hundred pages... that could get pretty boring.

Define a stylesheet inside of a document, like so:

Make sure the stylesheet is inside of the header tags

So, you must first declare that you are using a CSS style with the tag:

Everything inside of this tag browsers will try to read as cascading stylesheet data.
You may have noticed that there is also a comment tag inside of the style tag. This is so that if your browser does not support Cascading Stylesheets it will simply ignore everything inside of the style tag.

It's highly unlikely that you'll find a browser today that won't recognize CSS, but it's possible. In fact, while writing this tutorial, Internet Explorer decided to take a big ol' crap! It wouldn't recognize the background color styles -anywhere- until I deleted my cache, my history, my cookies, and refreshed my pages like 5 times each. Hurray for IE.

Now, you can declare all sorts of things like background color, text color and size, borders, margins, you name it. You'll also notice that everytime you want to define a new style the styles themselves must be contained inside of the "{" and "}" style paranthesis, and each statement must be ended with a ";" semicolon. Also, stylesheets do not use the "=" for comparisons, instead they use ":" the colon.

Of course you can limit yourself to just styling things like the body tag, the font, the paragraph tag... but you can get much MUCH more in depth than that. You can make your own custom styles later that can format almost anything you want.

Another way to declare cascading stylesheets (the way I most often use), is externally, and then link them.

For instance, I could make all of this CSS in a seperate file, and save it with the extension ".css"

Then, when I am inside of a document where I would like to use these styles, I simply create a link to them, inside of the header tags like so:

Where "yoursavedstyles.css" is the name AND path of your styles document, in comparison to the file you are using it in! You can now use any of the styles in that external document in any, and as many documents as you like, just as though the styles were defined in those documents themselves.

There is also a way to define the style for an element directly inside of that element. This, however, is sometimes very sloppy if you don't know what you're doing, can be incredibly confusing when you're trying to re-organize things later on, and overall just doesn't work as well.

You would define a style inside of an element itself for example, like this:

This can be useful in certain cases, when you're only worried about styling one page in one way, at one instance. This may also be an alternative to those people who don't know how to create custom styles and so still want to style each element.

So, remember when delcaring your styles to include the <!-- --> comment tag inside of the style tag so as not to confuse older browsers, after choosing which tag or style you're defining (like the "body" tag) you must store all of the styles for that element inside of "{" and "}" paranthesis. Each style inside of the paranthesis must be ended with a ";" semicolon, and compared, or defined with the ":" colon.

This concludes the Integrating CSS into a Webpage Tutorial.

-Spence