[SOLVED] How To Code a Thin Orange Line (HTML5)

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] How To Code a Thin Orange Line (HTML5)

Post by paulp575 »

How do I change the following HTML 4.01 transitional code

Code: Select all

<hr class="TABLE-CENTERED WIDTH75P" size="1" color="#fabd23" noshade>
to be HTML compliant?

The end result should be a thin (1ipixel high?) orange line with no background shading.
Last edited by paulp575 on Fri Jul 30, 2021 11:50 pm, edited 1 time 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: How To Code a Thin Orange Line (HTML5)

Post by Albert Wiersch »

Hello,

This seems to come close enough although perhaps 1 pixel thicker:

Code: Select all

<hr style="border: 1px solid #fabd23">
Here's a good link I found:
https://stackoverflow.com/questions/638 ... hr-element

If you want more control then there is some CSS in the top rated answer that you can use.
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: How To Code a Thin Orange Line (HTML5)

Post by paulp575 »

Doesn't work - I think.
Rather than using style in the HTML, I prefer to use CSS to style it.

Here's my style:

Code: Select all

*.HR
{
  BORDER: 1px solid #fabd23;
}
This produces a dark line - can't tell if it's black or dark gray.
Changing the color to red doesn't change the line. Changing the size to 10px also doesn't change it.
Seems like my CSS is being ignored and HTML is using the default - whatever that is.

Here's my HTML code I used:

Code: Select all

<HR class="WIDTH75P">
I read the link you suggested; very confusing! Too many suggestions that seem to contradict each other.

There has to be an easy/BETTER way!
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: How To Code a Thin Orange Line (HTML5)

Post by Albert Wiersch »

Hello,

It looks like you have the wrong selector.

Instead of this:

Code: Select all

*.HR
Change it to this:

Code: Select all

HR
Does that work?
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: How To Code a Thin Orange Line (HTML5)

Post by paulp575 »

As usual, you solved my problem.

I don't understand the difference between *.HR and just HR.

A long time ago I was advised (maybe by you? or following other examples to use *. in front of classes.
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: How To Code a Thin Orange Line (HTML5)

Post by Albert Wiersch »

paulp575 wrote: Mon Jul 26, 2021 10:53 pm As usual, you solved my problem.

I don't understand the difference between *.HR and just HR.

A long time ago I was advised (maybe by you? or following other examples to use *. in front of classes.
Great!

The "." in front of the name means it's a class name / class selector... so if it was .HR (or *.HR) then you would need:

Code: Select all

<hr class="HR">
But "HR" by itself (with no preceding ".") is a type selector, not a class selector... so with "HR" you'd only need:

Code: Select all

<hr>
Here is a good tutorial on selectors:
https://developer.mozilla.org/en-US/doc ... /Selectors
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
Post Reply