CSS Selectors
Posted: Sun Aug 13, 2006 9:06 pm
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 [url=\"http://skem9.com\"]Skem9.com[/url] 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]table {}[/code]
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]<table>
<tr><td>
stuff here
</tr></td>
</table>[/code]
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. [b]<tr>[/b] is rows within a table, [b]<td>[/b] is the collums. so,
[code]<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>[/code]
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]table { background-color:yellow; }[/code]
to edit each row seperatly it would be:
[code]table tr { background-color:blue !for row 1; }
table tr tr { background-color:green !for row 2; }[/code]
and same goes for the individual collums:
[code]table td { background-color:blue !for collum 1; }
table td td { background-color:green !for collum 2; }[/code]
when left as [b]table tr { background-color:blue; }[/b] this will become the property for all the rows in that table.
[code]<table>
<tr><td>
1
</tr></td>
<tr><td>
2
</tr></td>
<tr><td>
3
</tr></td>
</table>[/code]
now, [b]table td td td { }[/b] would skip down to 3 (the third td).
to seperate between tables you use "classes":
[code]<table class="w00t">
<tr><td>
1
</tr></td>
<tr><td>
2
</tr></td>
<tr><td>
3
</tr></td>
</table>[/code]
now, to do the same thing, the code would look like:
[b].w00t table td td td { }[/b]
Divs can also be put into tables, as well as tables in tables. an example of a div in a table:
[code]<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>[/code]
with the code [b]table div {visibility:hidden;}[/b] 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]table table td {}[/code]
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.
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]table {}[/code]
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]<table>
<tr><td>
stuff here
</tr></td>
</table>[/code]
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. [b]<tr>[/b] is rows within a table, [b]<td>[/b] is the collums. so,
[code]<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>[/code]
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]table { background-color:yellow; }[/code]
to edit each row seperatly it would be:
[code]table tr { background-color:blue !for row 1; }
table tr tr { background-color:green !for row 2; }[/code]
and same goes for the individual collums:
[code]table td { background-color:blue !for collum 1; }
table td td { background-color:green !for collum 2; }[/code]
when left as [b]table tr { background-color:blue; }[/b] this will become the property for all the rows in that table.
[code]<table>
<tr><td>
1
</tr></td>
<tr><td>
2
</tr></td>
<tr><td>
3
</tr></td>
</table>[/code]
now, [b]table td td td { }[/b] would skip down to 3 (the third td).
to seperate between tables you use "classes":
[code]<table class="w00t">
<tr><td>
1
</tr></td>
<tr><td>
2
</tr></td>
<tr><td>
3
</tr></td>
</table>[/code]
now, to do the same thing, the code would look like:
[b].w00t table td td td { }[/b]
Divs can also be put into tables, as well as tables in tables. an example of a div in a table:
[code]<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>[/code]
with the code [b]table div {visibility:hidden;}[/b] 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]table table td {}[/code]
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.
