In part one we were talking about web development languages and we managed to pull some data using PHP and SQL from a database about some purchases that we made on our debit card. We then took that data and structured it using HTML giving us a simple table that looks like it got the raw end of the ugly stick. I'll redraw the table so we can remember what it looked like. Cover your eyes...

Ok, so now we need to make this table look a bit (ok, a lot!) better than this - remember, HTML structures the data for display but CSS is the language to use to style it.

CSS :: The SKIN of Web Development

CSS stands for Cascading Style Sheet and is the language that, very specifically, defines how each piece of data, structured by HTML, looks. In web development, It's used to make the headline of a news article be a certain font, at a certain size, with a certain shadow. It's used to make the sidebar on your website be a sidebar. SO, with HTML you structure some data to be in a sidebar, but it's CSS that says, ok, the sidebar is 200 pixels wide and it's on the left side of the page. But enough of sidebars, let's style our table!

CSS styles elements in an HTML document by referring to them by either ID or by class*2. If you define a style using an ID, the style is applied only to the element with that ID. If you define a style using a class, you can reuse that style over and over again on different elements in the page. That's confusing, I know, so let's style the table and maybe it'll make some sense...

See the Pen Example Embed 4 by Skoti-Alain Elliott (@swinginsam) on CodePen.

Aah, that's a bit better, more readable in my opinion. So what did we do? Well, click the CSS button above in the code editor and we'll take a look at some of the CSS (I'm going to remove some of the bells and whistles to make it easier to grasp):

The CSS Run-Down

First, we assigned the ID "example" to our table so that only THIS table was affected. We then assigned a font, font colour, and font size along with a background colour and a width to that ID. We now apply these style attributes to the entire table so we don't have to continually redefine, say, the font and colour for every word inside our table.

Next, we define how the column head row should look (that's the 'th', short for table head.) The table head should be a bit different from a regular row in a table so we gave it a bold font and a lighter background colour along with a thin border and a little 'leg-room' to make the text easier to read. (That's the padding, it adds some space around the text, top, right, bottom, and left.)

Now we define how each row should look (that's the 'td', short for, uuuh, i'm not sure!) The rows already have a background colour- we defined that in the ID style so, we add padding as before and give each row cell a border like the header.

Ok, pause for a second and look at the CSS style names. See the #example? We use the # (pound) symbol to define ID type styles and, if you remember, ID styles are very specific and only apply to the element with that ID - and only one table can have that ID so none of the other tables are affected. Now, look at the next definition: #example thead th. Here, we are defining the th element that resides inside the thead element that is a part of our table with an ID of "example."

Now, that's a bit harder to get, but the point is that because we are specifically defining the "look" of an element inside our table with ID "example," these styles only apply to elements in this table and not the same type of elements in other tables. Finally, look at the final few definitions that start with a period (.lite, .blu, .eighty) These are class styles and they can be used over and over again by elements anywhere on the page, not just in this table.

In this case we are using the .eighty class on TIME and AMOUNT columns. We are using the .blu class, where? Exactly, the amount column. And we are using the .lite class on every other row. That's the way CSS works. Now, let's say that I used the .blu class in multiple tables, on multiple pages in my website but wanted to change the colour from blue to green, All I would have to do is change the .blu style definition in CSS and every element using the .blu class would immediately turn green. What a huge time saver!

Well, CSS is such an important language that it took up the entire article, we'll have to continue to the other languages in part three.

_{*2 - I am making a generalised statement here that is not strictly true in practice, but to grasp the basic concept, let's assume that it is!}