user1676691 user1676691 - 2 months ago 13
CSS Question

styling additional <hr> tag?

I am looking to style an additional

<hr>
tag for my side-bar on my website.

How might I be able to do this if I already have an hr defined?

hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 22px 0 21px; height: 0; }


Could I add a style?

hr.side { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 22px 0 21px; height: 0; }


so html would be

<hr class="side">
?

Answer

use

hr.side { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 22px 0 21px; height: 0; }

then

<hr class="side">

in css the . refers to a class , and # to id

EDIT:

if you really really wanted to do inline styling with style="" then it would look like this

<hr style="border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 22px 0 21px; height: 0;">

This last method is not really the recommended way, but works great if you want to override all css style sheets, and also override any <style> </style> tags that are embedded in HTML page