0

I have the following problem: I developped a tool that extracts styles from the HTML tags and put them into the header (i.e. it makes inline CSS internal). It seems however that line-height renders differently when having more than one CSS class:

This is the sample before tool-extraction: calling 1 internal CSS class + specifying 1 inline CSS style

<html>
<head>
<style>
<!--
 p.MsoNormal, li.MsoNormal, div.MsoNormal
    {margin-top:0cm;
    margin-right:0cm;
    margin-bottom:10.0pt;
    margin-left:0cm;
    line-height:115%;
    font-size:11.0pt;
    font-family:"Calibri","sans-serif";}
-->
</style>
</head>
<body>
<p class=MsoNormal style='text-align:justify;line-height:normal'>
<span style='font-size:20.0pt'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
sint occaecat cupidatat non proident, sunt in culpa qui officia 
deserunt mollit anim id est laborum.</span></p>
</body>
</html>

And this is the sample after tool-extraction: calling 2 internal CSS classes -> line-height renders differently!

<html>
<head>
<style>
<!--
 p.MsoNormal, li.MsoNormal, div.MsoNormal
    {margin-top:0cm;
    margin-right:0cm;
    margin-bottom:10.0pt;
    margin-left:0cm;
    line-height:115%;
    font-size:11.0pt;
    font-family:"Calibri","sans-serif";}
.inlineClass009
    {text-align:justify;line-height:normal}
-->
</style>
</head>
<body>
<p class="MsoNormal inlineClass009">
<span style='font-size:20.0pt'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
sint occaecat cupidatat non proident, sunt in culpa qui officia 
deserunt mollit anim id est laborum.</span></p>
</body>
</html>

2
  • What is an "internal CSS class"?
    – BoltClock
    Dec 27, 2012 at 10:49
  • an internal CSS is defined in the header, while an inline CSS is defined in a "style" tag attribute and an external CSS (out of the scope of this example) is defined in a standalone file with .css extension. see w3schools.com/css/css_howto.asp
    – mougino
    Dec 27, 2012 at 13:00

1 Answer 1

1

In both samples, there are two declarations for line-height on the element. In the first sample, the declaration line-height:normal in the style attribute wins, by the specificity rules. In the second sample, the declaration line-height:115% wins, because the selector p.MsoNormal is more specific than the selector .inlineClass009, by the specificity rules.

4
  • thanks, this is clearly a lead. then how could I prioritize my second class .inlineClass009 (created with the extractor) over the p.MsoNormal selector?
    – mougino
    Dec 27, 2012 at 13:02
  • Given the current order, p.inlineClass009 would suffice; then the specificity would be equal, so the order would matter. It would be safer to use higher specificity, e.g. p.MsoNormal.inlineClass009 (double class selector, i.e. the element must be in both classes). Dec 27, 2012 at 13:49
  • I found another way that works quite well: add the !important rule to the elements of the inline style that I make internal. I found it in the same page that you linked: w3.org/TR/CSS21/cascade.html#important-rules Which solution would you recommend, double class selector or !important rule?
    – mougino
    Dec 27, 2012 at 14:01
  • 1
    A more specific selector is a better way. The !important specifier should be used as last resort if at all. Besides, it would not help if the other rule has !important, too. Dec 27, 2012 at 14:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.