Styling a Table with css: Styling the table footer

Now, before add any additional styling, such as hover states and styles for the first column, let's take a few minutes and take care of styling the footer. So in the CSS file, let's come in here, let's copy our table#planets. Let's hit a few returns. Let's paste that after all of our table body rules. Then a space. Then we'll type tfoot. Then a space. Put in our brackets. For the main footer element, we're gonna set a font size to .8 ems, this will be 20% smaller than the base font.

So in the preview area, we can see that showing up here. Now, next we'll target the table row. We're gonna add a border top, so we can separate the footer from the body content. So in the next line, table#planets, hit a space. Tfoot, space, tr for table row. Put in our brackets.We're gonna set a property of border top. For the width, we're gonna set this to 2 pixels, then a space.

Style's gonna be solid, and then for the color, I wanna use the same color as the background of the header area. So in the CSS, I come up here and find the thead rule. Background color, let's come in here and copy the pound sign and the hex code. Let's copy that. Come down here, after solid, and a space, we'll paste this down here. And now in the preview, we can see that border showing up at the top of the footer element. And now we'll planet the td elements inside of the footer.

So I'll come in here and copy this rule. Paste on the next line, so after tfoot, hit a space. We're gonna target the td element. I'm gonna split this open. So first we'll come in here and set the color of the type, so color, colon, space, and then the color that I wanna use is gonna be a really light semi-transparent yellow. So we'll use the rgba color space. We're gonna set the red value to 255. 255 for green, and then for blue, we're gonna set this to 215.

Then a comma, then we're gonna set the alpha setting to 0.6, which will make the type 40% transparent. Next we're gonna set the text alignment to left. Next we'll set the line height. We're gonna set this to 15 pixels. And then lastly, we're gonna set a padding property of 15 pixels on the top and bottom, and 20 pixels on the right and left. So now that that spacing looks much better inside of the footer, the last two rules I wanna create are gonna target the anchor length that's inside of the footer.

So in the CSS, I'll scroll up here a little bit. Let's paste in our rule, up to tfoot, then a space, let's target the anchor tag. Put in our brackets.We're gonna set a color property here. And we're gonna set this to #f8 for red, dc for green, and ac for blue. Then the space. And then I'll set text decoration to none. Which will remove the underline. Then I'll duplicate this rule.

Come in here and change the a to a:hover. Then for color, let's come in here and change the color to white. So I'll # and three Fs. And we'll change the text decoration to underline. So now if you previewed this in a browser, when you hover over the link, it will turn white, and you'll see an underline. So now that we've finished dialing the footer, next we're gonna create a rule that's gonna target all of the elements in the first column, and style those just a little differently from the other columns.