Question

I'm making a website for computers class, and I'm working on the HTML part of it.
On one of the web pages, i have two tables and in the style (CSS) part of my code, I have:

table {
background-color: blue;
}
and it made both tables blue.
What do I do if I only want the first table to be blue?

Answer 1

You need to identify the first table in some way. The most common way to do these things are IDs and Classes. This would look like this:

<table id="first-table" class="first-class second-class"> </table>

Important to note!: You can have as many classes as you want (they should be separated by a space). But you can only have one id. Even more, this id should be unique. That is to say, no other html element should have the same id.

then in css you refer to ids with the '#' sign and classes with a '.'

So I could refer to that table in a few ways:
table { ... }
#first-table { ... }
table#first-table { ... }
table.first-class { ... }
.first-class { ... }
.first-class.second-class { ... }

these all refer to the same table. I would recommend using just '#first-table'.

The difference between all of the above possibilities is that the more *specific* rules get priority. For instance:

table { background-color: blue }
table#first-table { background-color: red }

all tables except the one with id = "first-table" would be blue background. That specific table would be red.

Answer 2

That may be more than you asked for, but if you understood it you're well on your way to pwning HTML. if you didn't, of course ask any questions you may have.

Answer 3

ohhh!! that makes sense!! thank you so much!

Answer 4

No prob :). Feel free to give me a medal if I helped ;)

Answer 5

there u go!!