[SOLVED] Convert HTML to CSS

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
Post Reply
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

[SOLVED] Convert HTML to CSS

Post by paulp575 »

How would I write this for a style sheet:

Code: Select all

<tr><th style="border-right:1.4em solid #228B22">2021</th></tr>
I've tried a variety of BORDER-WIDTH-RIGHT and included a color, but nothing is working. It's either nothing or the color covers the text.

Thanks.
Last edited by paulp575 on Thu Aug 12, 2021 11:18 pm, edited 4 times in total.
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: COnvert HTML to CSS

Post by Albert Wiersch »

I'm not sure I understand the question but perhaps you are simply wanting something like this?

Code: Select all

th { border-right:1.4em solid #228B22; }
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Convert HTML to CSS

Post by paulp575 »

Again - that worked.

Thanks.
paulp575
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Convert HTML to CSS

Post by paulp575 »

Not working because I didn't provide all the details.

Let's try again - sorry.

Here's the original code:

Code: Select all

<tr>
  <th style="border-right:1.4em solid #0BDA51">(year)</th>
  <td>Green Text here</td>
</tr>
<tr>
  <th style="border-right:1.4em solid #ff0000">(year)</th>
</tr>
Note: The second row which is red has no text (some red rows MAY have text).

I'm thinking I need to use the id selector?

The end result would be one line with the year in black (default color) and a green box to the right of the year and then some black text to the right of the green box.

The next line with the year in black (again, default color) and a red box to the right of the year and then some black text to the right of the red box.

Not all lines will have text, but that should be easy to figure out - maybe.

Thanks.
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Convert HTML to CSS

Post by Albert Wiersch »

If I am understanding correctly, it sounds like you should use class selectors.

Like this CSS:

Code: Select all

th.greenbox { border-right:1.4em solid #0BDA51; }
th.redbox { border-right:1.4em solid #ff0000; }
With this HTML:

Code: Select all

<table>
<tr>
  <th class="greenbox">(year)</th>
  <td>Green Text here</td>
</tr>
<tr>
  <th class="redbox">(year)</th>
</tr>
</table>
Does this do what you want?
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Convert HTML to CSS

Post by paulp575 »

I figured out a different way to make this happen, but will save your code for future use.
paulp575
Post Reply