[OUTDATED] ★ Tetra's CSS Guide ★

@Bunny

The code would just be:

.table {

   background: /* background value here */

}

.table th {

   background: /* background value here */

}

Thank you so much!!!! You're so helpful :)

what will happen if I use to much !important ?

@MagicDream286

Nothing bad in particular will happen to your code, since the modifier has nothing to do with the styles themselves. It's just not necessary to put it everywhere.

Hello again, sorry to pop back up! I was having a little trouble with my header and also had a few more questions (I'm really sorry ahhh)

.table th {

   background: rgb(0, 0, 0, 0) 

}

                  .table {

   background: rgb(86 153 37 / .3)

}

Thats my code^ I'm trying to make the header transparent but the background a color but it keeps ending up the same color and I don't know why? 

I also have 2 questions regarding the image above. I was wondering if i would be able to change the font color? and if so how would I do that? because it's kinda hard to see the font and was wondering if I could change it to like white or something. My last question is how can i change the box color (the box that say name, pack, alpha, etc) because it didnt change with the other box. I'm really bad at wording stuff so I hope you understand and thank you so much!!!! Also I apologize if some of this stuff was already answered

@Bunny

No worries!

Your code did make the header transparent, it's just that since it has no background, the table's background will show through and the two will blend with each other. The table header is located inside the table and on top of its background.

If you wanted only the table header to be transparent and the other table rows to be colored, you could alternatively: make .table transparent, make .table tr  your desired background color, and then make th transparent using !important to override the tr rule just for the header.

You should be able to change the font color using the color property - in your example it would be color:white; place this wherever you want your text to be white.

The gray column on the left are identified by the .left selector. Code for this would be:

.left {

   background: /* desired value here */

}

You're a lifesaver thank you!

I'm so so sorry for coming back again aaaa i dont know where i messed up this time but it still looks the same as before :( 

}

.table th {

   background: rgb(86, 153, 37, 0) !important

}

                  .table {

   background: rgb(116, 145, 98, 0) 

}

.table tr {

   background: rgba(86, 153, 37, .53)

}

.left {

   background: rgba(86, 153, 37, .53)

}

@Bunny

I did some fiddling - and this should work (?):

.table {

    background: transparent;

} .table tr {

    background: rgba(86, 153, 37, .53);

} .table tr:first-child {

    background: transparent !important;

} .table th {

    background: transparent !important;

}

And it seems .left is one of the stubborn elements - remember to use !important for those.

.left {

    background: transparent !important;

}

That does work! Thank you so much again