CODEWITHSUNDEEP
htmlcssinheritancestyles
Oliver
Oliver

Reputation: 23510

CSS - Styles does not inherit properties

I have this code and I don't understand why my H1 and its associated P tag do not get the font and size defined in th BODY css element (no inheritence).. unless I uncomment the * css style, what is a really bad idea. And if I do so, I can't change their properties redefining them in the P css tag (inheritence seems forced).

I have this problem for maaany tags, and I don't wanty to have to redefine each time the font and size.

global.css

/*
* {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
*/
html {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px;
}

p {
    text-align:justify;
    margin:0px;
    margin-bottom:10px;
}

HTML

<HTML>
<HEAD>
<TITLE>a</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<LINK href="global.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<DIV>
  <TABLE width="100%" border="0" cellspacing="0" cellpadding="0">
    <TR>
      <TD width="1" valign="top"></TD>
      <TD valign="top">
        <div>
          <H1>Title</H1>
          <p>Some text</p>
        </div>
      </TD>
    </TR>
  </TABLE>
</DIV>
</BODY>
</HTML>

Upvotes: 0

Views: 5039

Answers (4)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

The H1 element does not inherit font-size because it has font-size set in the browser’s default style sheet.

The P element does not inherit it because the element sits in a table cell and “quirks mode” in browsers means, among many other things, that tables break inheritance. Your page is displayed in quirks mode because it has no doctype declaration; putting <!doctype html> at the very start is the simplest way to avoid quirks mode, but many pages rely on quirks mode and go to pieces in “standards mode.”

If you uncomment the first rule, which uses the universal selector *, it will apply to all elements but will be overridden by any other rule in your stylesheet, such as p { font-size: 5px }. If this does not seem to be the case, then there is an error in the other rule—use the W3C CSS Validator to check the syntax first.

Upvotes: 0

bookcasey
bookcasey

Reputation: 40433

Browser's user stylesheets style h1 and p, as well as all other elements individually, which has a higher specificity than through body.

Style them individually to override these styles.

h1, p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px;
}

You may also be interested in a CSS reset.

Upvotes: 3

jmacinnes
jmacinnes

Reputation: 1609

H1 and P both have native, browser defined styles that is different from the default browser style. Without any styling information, H1 looks different from text in just the body, right? For these reasons, you need to override them explicitly.

html, h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

Upvotes: 1

Dominic Green
Dominic Green

Reputation: 10260

h1 by default has font sizes associated with it by the browser by default you can either use a reset style sheet to solve this or simply.

  h1,p{
font-size:12px;}

Upvotes: 1

Related Questions