CSS Selectors

[Decessus]

Do you feel like you're doing this when it comes to CSS? <img src=\'http://www.killanet.net/forum3/public/s ... >/help.gif\' class=\'bbc_emoticon\' alt=\'(help)\' />, if so, have no fear, well, actually Superman is sick, so he personally sent me here to help out a bit. This is a beginer level tutorial. Just sit back and relax a bit. I would like to thank Skem9.com for agreeing to put a link to this tutorial on their site, ahead of time. Let's begin shall we?

This tutorial is aimed to show you the basics in selecting things within a table. Now if you know anything about CSS, you know that,

Code: Select all

table {}

sets the properties for ALL tables on your page, but what if you just want to set the property for just one thing inside that table? This is where it gets fun <img src=\'http://www.killanet.net/forum3/public/s ... iggrin.gif\' class=\'bbc_emoticon\' alt=\':D\' />

CSS stands for cascading style sheet. basically, you make a site, and everything can be edited with CSS rather than revamping the entire thing, and the most common thing on site is usually a table.

Code: Select all

<table>
<tr><td>
stuff here
</tr></td>
</table>

The table actually constrains content, much as a coffee table keeps your coffee cup from falling to the floor, given that you put it there properly. <tr> is rows within a table, <td> is the collums. so,

Code: Select all

<table border="0">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

would look like this:

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

to edit its properties it would look like this for the whole table:

Code: Select all

table { background-color:yellow; }

to edit each row seperatly it would be:

Code: Select all

table tr { background-color:blue !for row 1; } 

table tr tr { background-color:green !for row 2; }

and same goes for the individual collums:

Code: Select all

table td { background-color:blue !for collum 1; } 

table td td { background-color:green !for collum 2; }

when left as table tr { background-color:blue; } this will become the property for all the rows in that table.

Code: Select all

<table>
<tr><td>
1
</tr></td>
<tr><td>
2
</tr></td>
<tr><td>
3
</tr></td>
</table>

now, table td td td { } would skip down to 3 (the third td).

to seperate between tables you use "classes":

Code: Select all

<table class="w00t">
<tr><td>
1
</tr></td>
<tr><td>
2
</tr></td>
<tr><td>
3
</tr></td>
</table>

now, to do the same thing, the code would look like:

.w00t table td td td { }

Divs can also be put into tables, as well as tables in tables. an example of a div in a table:

Code: Select all

<table>
<tr><td>
All Your Base Are Belong To Us.
</tr></td>
<tr><td>
<div class="extra">
This would be extra stuff in the table, in the form of a div.
</div>
</tr></td>
</table>

with the code table div {visibility:hidden;} will hide the div(s) in that table.

Selecting tables in tables in done in the same way selecting rows/collums in a table.

Code: Select all

table table td {}

If anything confuses you about this tutorial, or if you have any further questions, just register here (if you havent already) and ask it right here. Later on I'll write another CSS/HTML tutorial maybe.

[Scott]

<img src=\'http://www.killanet.net/forum3/public/s ... >/good.gif\' class=\'bbc_emoticon\' alt=\'(Y)\' /> Good job <img src=\'http://www.killanet.net/forum3/public/s ... /smile.gif\' class=\'bbc_emoticon\' alt=\':)\' />

[Decessus]

thanks <img src=\'http://www.killanet.net/forum3/public/s ... iggrin.gif\' class=\'bbc_emoticon\' alt=\':D\' />

[ner0]

great tutorial godfather, I\'m inspired.. although, you spelt column wrong :\'( how dare thee

[Decessus]

haha, ty, and you mean i HAVE to spell correctly?