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 careof 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 sizeto .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 separatethe 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 backgroundof 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 signand 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 bordershowing 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 thecolor of the type, so color, colon, space,and then the color that I wanna useis 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 settingto 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 propertyof 15 pixels on the top and bottom,and 20 pixels on the right and left.So now that that spacing looks much betterinside of the footer, the last two rulesI wanna create are gonna target the anchor lengththat'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 colorto 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 targetall of the elements in the first column,and style those just a little differentlyfrom the other columns.