Applying different css styles to text

Question

I have a <table> , with some text in it:

<table>
  <tr>
    <td>
      <b>Title</b>
      <br />
      Some description text
    </td>
  </tr>
</table>

This works great, except now I want to give the title and the description different text colors. I want to maintain their current spacing though, otherwise I would do this:

<td>
  <p class="title">Title</p>
  <p class="desc">Some description text</p>
</td>

Using a "< p >" element seems to inject a tall new line, instead of the nicer "< br />" (well at least nicer in my opinion). But if I don't use a "p", I'm not sure how to apply different styles to either piece of text.

Thanks

Answer 1

Add the following style to your p tags:

css

p {
    padding: 0px;
    margin: 0px;
}

h1 {
    margin-bottom: 0px;
}

html

<td>
    <h1 class="title">Title</h1>
    <p class="desc">Some description text</p>
</td>

Answer 2

How about this?

td {
  color: orange;
}

td b {
  color: blue;
}

Answer 3

Using a "< p >" element seems to inject a tall new line, instead of the nicer "< br />" (well at least nicer in my opinion)

No it isn't nicer in anyones opinion.

Just style the p how you would like it to be presented, eg:

p { margin-bottom: 0; }

Also it looks like you not using tables for tabular data, but rather for layout purposes which is bad m'kay.

Also even the p tag wouldn't be semantically correct. Use a heading tag for this.

Another advantage is that you don't have to use those ugly b tags. Even if you need to use b features you should use the strong element.

Answer 4

If you give a unusual attribute, you can anything you want.

CSS:
        tr[unusual="1"] {
            background-color: yellow;
        }

HTML:

        <tr unusual="1">
        <td></td>
        </tr>

Answer 5

The second code you show is better, because more semantically correct. Even better would be this:

    <td>
        <h3>Title</h3> <!-- this is a title, so mark it as one -->
        <p>Some description text</p> <!-- this is a piece of text, so mark it as one -->
    </td>

And use the following CSS:

h3,p {
    margin:0;
}
h3 {
    color:red;
}
p {
    color:blue;
}