标题标签的默认CSS样式是什么？ （H1，h2，h3，h4，h5）

Question

In HTML, headings are denoted with <H> (1,2,3,4,5,6) tag.

My question is regarding following HTML code:

<div class="pure-u-1-1 pure-u-lg-3-3">
    <h3><form:label path="gen">Registrer Bruker</form:label></h3>
</div>

Instead of writing <H3> , i want to write property of class in CSS ; which gives same font size (look and feel); as of heading HTML gives. Also is there predefined property for same in CSS?

Answer 1

The answer is no, however you might hack the styles. Most browsers will try to use these styles

(Taken from: w3schools )

h1 { 
    display: block;
    font-size: 2em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
h2 {
    display: block;
    font-size: 1.5em;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
h3 { 
    display: block;
    font-size: 1.17em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
h4 { 
    display: block;
    margin-top: 1.33em;
    margin-bottom: 1.33em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
h5 { 
    display: block;
    font-size: .83em;
    margin-top: 1.67em;
    margin-bottom: 1.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
h6 { 
    display: block;
    font-size: .67em;
    margin-top: 2.33em;
    margin-bottom: 2.33em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

Answer 2

Are there predefined property for same in CSS; which gives same look and feel as H gives?

No.

The default style of a heading is (in most browsers) exactly that: a collection of different CSS rules coupled with an Hn selector (and stored in the browser stylesheet).

There isn't a (plain CSS) way to automatically copy all of those rules.

You could use the Inspector tool that comes in the developer tools built into most browsers to examine a heading and look at the default rules for it, and then copy those rules to your own (author) stylesheet.

There may be some variations between browsers, so you'll generally want to set the Hn rules explicitly too.

Answer 3

Question: is there predefined property for same in CSS?

No

You can try like this:

h3{ 
   display: block; 
}

h3 {
   font-size: /*Font size similar to h3*/ ;
}

Answer 4

Think a good practice is let h<1-6> keep their default styles. And then add a class to add additional styles. Just seems cleaner to me, and you are not hacking the "master styles." Pros and Cons I'm sure.

<h1 class="h1">Hello CSS</h1>