CSS for Beginners - by Nagas


Hello Stonerocket.
I´ve created this little tutorial about CSS for begginers
in my last host, but it fell down so I´m movin´the Tutorial
to here along with my site .hope you enjoy it n´have a good time readin´it.

In this Tut I´ll explain some the basics here, usin´a simple language
but if you really want to learn it,
then look for a cool CSS site and teach yourself.
I won´t care that much about the html syntax here, so,
go look for it at W3C site.

CSS - Intro

CSS - Cascade Style Sheets are codes that you can use
to style your site. It´s good to use CSS cos´ it separates
your main HTML code, as I like to call it, from your style codes, like:

Code:
<FONT COLOR="RED"></FONT>


Here, FONT is your main HTML code and COLOR="RED" is your style code.

With Css those two codes wouldn´t be together at your font-code.
The HTML would be alone in a file and the CSS would be all alone in another.

You wouldn´t mix it.
This is one of the greatest features in CSS. It "cleans" your HTML codes and makes it easier to work and lower the size of your pages too.

CSS - Lots of Elements with one code

Another great thing is that with CSS you can style lots and lots of elements with only one code.

Like, if you have two tables, and want their backgrounds to be blue, you gotta do:
Code:
<TABLE BACKGROUND="BLUE"></TABLE>

<TABLE BACKGROUND="BLUE"></TABLE>

You have to repeat the same code everytime you create a new table.

CSS - Embeded in HTML

With CSS you can style all of them with only one code.
Code:
<html>
<head>
<title> Test </title>

<style type="text/css">

table {
    background: #00f;
}
</style>

</head>

<body>
<table>
   <td>text</td>
   <td>text</td>
</table>
</body>
</html>


In this example I embeded the CSS code inside the HTML code. You can see the CSS inside the tag <style>.
It´s not recomended to procede this way.
If you do like this, you´ll lose that great feature that CSS has that lets you separate the CSS code from the HTML ones.


CSS - Different looks

It can happen at sometimes that you don´t want all the tables
of your site to look equal, or the same. And when you want
something to be diferent from all the rest, you gotta create a
special kind of thing called Class or ID.

They are exactaly the
same thing. But each one has to be used in a specific chase.

Like you have your own ID card, or you study in a Class.
The id is more peculiar, like your ID card, you´re the only owner of it.
The class is more open, and there´s a lot of people studin´ there with you, it´s not only for you.

CSS - .Class and #ID

You gotta use the #id when the element you want to style will appear once at that page.
(like on the top, or the bottom of it.I bet you never saw a site with
two bottoms, but that would be very nice, huh???)

And you gotta use the .class when the element you gonna style will appear twice or more times at the same page.
(like a <p></p> or a <div></div>)

Note: Pay attention to the character before the class and id.
. class
# id

If you see a dot . what you see is a class.
If you see this #....(like a music sharp note, or that tic-tac-toe game. I dunno it´s name in english) then, what you see is a id

CSS - When do I use class and ID?
And here you gonna ask me:
Quote:
"How do I know when to use a class and when to use the id?"

It´s simple easy.It´s logic.
If you´ll repeat the style again in other element, use the class.
If you´ll use it only once at your page, then, use the ID.

And you ask:
Quote:
What happens if I use them wrong?

And I answer - "You gonna have an error on your code."

If you change a id for a class you probably won´t have any problems at all.
but, if you change a class for a id, your code will not work. And that
will happen because the class is made to work for one or more elements but the id
is used to work in a single element.

CSS Creatin .Class n´ #ID

And then you gonna ask me:
Quote:
C´mon motha@#$%% stop talkin´ and teach me how do I create the class and ID!!!!

and I - "Ok! Ok! Get a hold on your horses!
Just don´t be frustated, if you can´t in the first try, cos it´s very hard and long."

Lets suppose that we want to create a class called blue for the <table> and a id called red for the top of the page, that will go into a <div>.

Code:
.blue {
    background: #00f;
}

#red {
    background: #f00;
}

Done.Very hard, isn´t it???

CSS - Show the browser

And now you gotta show the browser which tables you want
to look blue and which div is the top of the page.

For it, use the codes:
Code:
<div id="red">
<table class="blue">

Now the browser knows wich tables are from blue class.

CSS - Example

Here´s a workin example.
Code:
<html>
<head>
<title>Test</title>
<style type="text/css">

.blue {
    background: #00f;
}

#red {
    background: #f00;
}

</style>
</head>
<body>
<div id="red">
<p>anything you want goes here</p>
</div>

<table class="blue">
<td>Text</td>
<td>Text</td>
</table>
</body>
</html>



NOTE: The dot and #(sharp) before the class and id. The blue is a class cos´it has a dot, and the red is a id cos´ it has a Sharp.

Now that you know what is a class and a id let´s start to separate our CSS from our HTML.

To view the rest of the tutorial please follow this link
http://www.stonerocket.net/forum/viewtopic.php?f=48&t=19264&p=135037