0

Consider the following code :

<p align="right"><a href="AddUser.html"><h2>Add 
User</h2></a> |  <a href="AddCustomer.html">Add Customer</a></p>

There is not much change in the output when I write the following code in the style tag, 

p {
    font-size  : 7mm;
        font-family: Garamond;
        font-style : Normal;
}

But if I write the same code in h2{} or a{} the echange is quite visible. Kindly explain why is it so ?

A_J
  • 977
  • 4
  • 16
  • 44
  • 1
    Is that the *only* CSS code you have? – Jcl Jan 26 '15 at 07:43
  • Look at your browser's element inspector. Any decent modern browser will tell you exactly which CSS rule overrides which on any given element. – deceze Jan 26 '15 at 07:45
  • Yes if I change font-size there is no significant change in the output – A_J Jan 26 '15 at 07:48

2 Answers2

2

That's because header tags are not supposed to be inside paragraph. As the name suggests, its meant for headers.

Use <span> instead of <h2> if you want to make any changes. If you remove the <h2> in above code, the css will work fine.

Check fiddle

You can use <span> like this

Also, read this : Should a heading be inside or outside a <p>?

Community
  • 1
  • 1
Polynomial Proton
  • 5,020
  • 20
  • 37
2

The problem is that you are using block level elements (the <h2> in this case) inside a paragraph, which is not possible.

From the W3C reference:

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

So most web browsers will actually break your paragraph and then, since the rest of the content is outside it, it will not apply the CSS style.

If you check it with the developer tools (in Chrome, for example), you'll see that the <h2> tag is actually outside of the paragraph.

Demo: enter image description here

The bottom line, and general recommendation is: do not use paragraphs as "html blocks", or headers for styling inline elements... use the recommended <div> and <span> tags for it.

HTML should be semantic, and what you are writing there is neither a paragraph, nor a header. Use the right tags

Jcl
  • 27,696
  • 5
  • 61
  • 92
  • But even "Add Customer" which is outside

    is not displaying the change

     – A_J Jan 26 '15 at 08:04
  • @user4449595 since the browser is breaking the first paragraph, the rest of it is implementation dependent... if you check the output in the developer console (check my screenshot), the other link is outside any block level element (it's directly a child of ``, so it's not inside any `

    ` either (and thus, not styled). The `

    ` you see at the end is the browser's best guess to comply with your closing `` tag, but it doesn't have content inside it.     – Jcl Jan 26 '15 at 08:06