styling additional <hr> tag?

css styling
user1676691 picture user1676691 · Nov 20, 2012 · Viewed 37.8k times · Source

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

Scott Selby picture Scott Selby · Nov 20, 2012

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

Related questions

CSS change button style after click

I was wondering if there was a way to change a button's style, in css, after it's been clicked, so not a element:active. Thanks!

Read More
textarea's rows, and cols attribute in CSS

I'd like to set the textarea's rows and cols attributes via CSS. How would I do this in CSS?

Read More
Horizontal scroll on overflow of table

I have a basic table in a container. The table will have about 25 columns. I am trying to add a horizontal scroll bar on overflow of the table and am having a really tough time. What is happening now, is …

Read More