HTML and CSS Reference
In-Depth Information
How about some color?
You know Tony loves his signature color and there's no reason not
to add a splash of orange to his table; not only will it look great,
but we can actually improve the readability of the table by adding
some color. Just like for any other element, all you need to do is
set the background-color property on a table cell to change its
color (notice how everything you've learned about HTML and
CSS is starting to come together!). Here's how you do that:
th {
background-color: #cc6600;
Add this new rule to your “journal.css” file and reload.
Here's what you'll see:
How about some color in the
table rows?
So far, the color is looking pretty nice. Let's take it to the
next level. A common way to color tables is to give rows an
alternating color, which allows you to more easily see each
row without getting confused about which column goes
with which row. Check it out:
Difficult to do in CSS? Nope. Here's how you can do this.
First define a new class—let's call it “cellcolor”:
.cellcolor {
background-color: #fcba7a;
and then add this class attribute to each row you'd like
to color. So in this case, you find the <tr> opening
tags for Magic City, Last Chance, and Why, and add
class="cellcolor" to each one.
Your turn. Add the class “cellcolor” to your
CSS in “journal.css”, and then, in your
HTML, add class=“cellcolor” to each of the
<tr> opening tags needed to make the rows
alternating colors. Check your answers
before moving on.
Search WWH ::

Custom Search