Intro to CSS - CSS Part 1

[Bradley]

Intro to CSS - CSS Part 1
By: CCWorld aka Bradley Nelson



In this first part I want to start with the basics. This first part will assume you know nothing. Feel free to skip to part two (if I've finished writing it) if you know the basics of CSS.

CSS can be used can be used three ways: external style sheet, internal style sheet, and inline style. If you have a lot of CSS to use I reccomend that you use a external style sheet that is hosted on a web host. Other wise it is best to use (a) internal style sheet(s). A basic internal style sheet looks like the following. Note the basic parts of it.

<style type="text/css">
<!--
body
{
background-color: #000000;
}
-->
</style>

The entire document is enclosed in style tags. Proper XHTML specifacations declare that you must use the type attribute. In case a user comes using a very old browser inclose everything inside the style tag with an HTML comment. Open it a the beganning and close it at the end.

In the above example body it the object (also called selector) bring modified. After that the opeing of a { bracket is seen. Everything up until the closing } bracket is modifying body (they are properties). In this example the background-color propert is being set to the value #000000 which is the color black. Every attribute must have a semicolin ; after it.

<style type="text/css">
<!--
p.nav
{
color: #000000;
}
-->
</style>

The above code would modify any paragraphy with the class nav. Removing the p before it would modify anything with the class nav. You may also group things like this:

<style type="text/css">
<!--
h1,h2,h3,h4,h5,h6
{
color: #000000;
}
-->
</style>

That would modify headers 1 through 6 to have black text.

Inline style is best for one object only. If the same style is going to be used for more than one object it would be better to use a class instead. Here is an example of inline style:

<p style="color: #ff0000; margin-left: 20px;">
This is a paragraph
</p>

Finaly when using an external style sheet you can use the link tag as in this example:

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

You can also use the import method.

<style type="text/css">
<!--
@import url(http://somewhere.net/css/layout.css);
-->
</style>

I hope you learned something from this. Any errors please point them out. I hope to finish part two in a day or two... soon...#nosmileys#nosmileys