Style `.h1` class to be like `h1` tag

Question

What styles do I need to add to my heading classes to make any element behave like heading tags...

.h1, .h2, .h3, .h4, .h5, .h6 {
  // make akin to h tags
}

I might be using them on div or span or li etc... so need a fairly robust reset. I am thinking things like display: block; but don't really know what the definitive set of required rules are.

Edit: clarification

Although already answered for me - I thought I would clarify my use case as I seem not to have articulated it well.

I need to change some h1, h2 etc... tags into div or span or li tags on a large site where I don't control all of the HTML. I want the new tag, whatever it may be, to behave exactly like it did when it was a heading tag. It must work cross browser, and I was hoping for a definitive, one rule fits all solution that is easy to maintain and has no significant pitfalls (in terms of SEO and accessibility etc...).

Sure you can see this page : [http://stackoverflow.com/questions/1725470/h1-tag-class-alternate][1] [1]: http://stackoverflow.com/questions/1725470/h1-tag-class-alternate — Ivin Raj, Oct 01 '15 at 12:45
You can see this page: [SEE THE PAGE][1] [1]: http://stackoverflow.com/questions/1725470/h1-tag-class-alternate — Ivin Raj, Oct 01 '15 at 12:46

score 2 · Accepted Answer · edited May 23 '17 at 11:51

2

Well the standard CSS rules are different per browser.

More information in this answer:

Browsers' default CSS for HTML elements

edited May 23 '17 at 11:51

Community

1
1

answered Oct 01 '15 at 12:30

Bert Vermeire

416
4
7

This answer to your linked question helped me a lot. Firstly referencing https://github.com/sw4/revert.css which looks great as a start to resetting any element type to a common base. Secondly linking to http://www.w3.org/TR/html5/rendering.html#sections-and-headings which specifies the common base itself. Thanks for lighting the way as I was fumbling about in the dark. – Billy Moon Oct 01 '15 at 13:21
You may find the selectors `:-moz-any(article, aside, nav, section)` and `:matches(article, aside, nav, section)` helpful. A brief guide on what these do can be [found here](https://hacks.mozilla.org/2010/05/moz-any-selector-grouping/) – DavidT Oct 01 '15 at 13:47

score 1 · Answer 2 · answered Oct 01 '15 at 12:53

As Bert Vermeire stated it's different for each browser.

That's why it's better to create some reboot/reset css file which contains the span.h1 to h6, p.h1 to h6, ... (as for divs, not sure how you intended to use that) which cancels all margins, paddings, line-heights, font-weights, and so on.

Here is a sample of one of my projects:

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: normal;
  line-height: 1.1;
  color: inherit;
  margin-bottom: 0.5rem !important;
  margin-top: 0 !important; }

h1,
.h1 {
  font-size: 2.5rem; }

h2,
.h2 {
  font-size: 2rem; }

h3,
.h3 {
  font-size: 1.75rem; }

h4,
.h4 {
  font-size: 1.5rem; }

h5,
.h5 {
  font-size: 1.25rem; }

h6,
.h6 {
  font-size: 1rem; }

Be careful though, as rem sizes aren't supported on every browser. Use em, px, ... instead

score 0 · Answer 3 · answered Oct 01 '15 at 12:59

The properties can be:

.h1, .h2, .h3, .h4, .h5, .h6 {
  display: block;
  font-size: 25px;
  font-weight: bold;
  margin: 10px 0 15px; /*the heading tag gets it by default but not the other tags*/
  color: #333333;
  border-bottom: 1px solid #848484; /*if your heading includes a bottom line*/
  padding: 0 0 0 30px; /*if your heading includes any icon on its left side*/
  text-align: center; /*if heading text needs to be center*/
  background-color: #ffffff;
}

Style `.h1` class to be like `h1` tag

3 Answers3