styling additional <hr> tag?

Question

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 1

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