Adding styles to the main table element - phpMyAdmin Tutorial

- [Voiceover] Now to begin our project, let's go into the Exercise files, let's find the Index.html file, and let's open this up in a text editor. Now as I mentioned before, I have a bunch of content set up in here already. We have an HTML5 document with a heading area and a body area. There's a header here, which has an h1 called, Planet facts. And some placeholder copy here. Down here on Line 17 is where we begin the table. Now I did put in some older attributes here. Border, cellspacing and cellpadding. These are attributes that you're not going to use in HTML 5, but you may be styling a table that has some of these attributes in there. And I just put these in here so that we could see the table borders before we start to add our own styles. Inside the table, we also have a heading area, thead, a footer area, tfoot, and the body area, tbody. Now typically, the footer element goes before the body element, and this is for accessibility reasons. In case there's a whole bunch of content in the body area, we want to be able to see the footer content showing up higher on the page. So to preview this, you can open this up in a browser. My particular text editor has a built-in preview. So I'm gonna come over here and turn on the preview. And then here in the browser, you can see all of the elements that I already have in place. We have the heading area at the top, our placeholder content, and the table. Down here you'll see that the footer element is rendering at the bottom. And we have a columnspan set on the first td, and the tfoot area, showing up right here, spanning this content across four columns. So before we jump into the CSS, the first thing we'll do is, let's scroll up to the top. Let's find the table with an ID of Planets. Let's come here and remove the border, cellspacing, and cellpadding attributes. So we'll simply be left with the table tag, and the ID equaling Planets. Now in the preview area, you will see that all of the borders and the spacing went away. So again, I just had those attributes in there just so we could see the structure of the table. This is how it will typically look if there are no styles applied in most modern browsers. Now I'm just gonna decrease the width of my browser a little bit. Make sure my HTML file is saved. Let's go back to the Exercise files. Let's go into the Assets folder, and let's open up the Style.css file up in our text editor. Now in my text editor, here, I'm going to open the Style.css file on the left-hand side, while leaving the preview to the HTML file over on the right-hand side. If your code editor doesn't have a built-in preview, then you can go over to the browser and hit reload. So with the CSS file open, at the top here, I'm importing two fonts from Google. I have some rules up here at the top that I put under a comment called, Page Design. And we're specifying the body, header, article, h1, h2 and a paragraph. There's a section here under the Table Styles comment where we're going to write our styles. And I do have one Media Query down here, which targets screens under 400 pixels. And all I'm basically doing to the table here, is setting the Font Size down 2.9 ems. So if I come over here to my preview, and decrease the width to lower than 400 pixels, you'll see the Font Sizes jump down a little bit. This way the table will fit, even on the smallest screen sizes. And now back in the CSS file, the first rule we're gonna create is gonna target the Main table container itself. So I'll start by typing, table then a pound sign, then we'll type in, planets we're gonna target the table element with an ID of planets. Put in our beginning and ending brackets. Now the first property we're gonna set is gonna be a margin. So I'll type, margin colon space, I'll set 20 pixels for the top, zero on the right, zero on the bottom, and zero on the left, then a semi-colon. That will push our table down a little bit away from the placeholder text. Next we'll set a property called, border-collapse we're gonna set this to collapse. Then on the next line, we'll set border-spacing we're gonna set this to zero. Now next we'll set a background color and bring in a background graphic. So we'll start with the background property. Then using shorthand style, we'll specify the background color first. So pound sign and three zeros for black. Next we'll specify the background graphic. So set url, beginning and ending parentheses. And then inside of the parentheses, inside planet.png. That will bring the ping graphic into the background. Then a space, and then next we'll set the repeat to no-repeat. Then we'll set the position x to top. And the position y to center. And then the last property we'll set on the Main table element will be the color of the text. So I'll type, color colon space pound sign and three Fs for white. And now with our Main table element styled, next we'll target the table header elements and the table data elements.