View Single Post
Old 02-26-2011, 07:10 AM   #93
DMSmillie
Enquiring Mind
DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'
 
DMSmillie's Avatar
 
Posts: 562
Karma: 42350
Join Date: Aug 2010
Location: London, UK
Device: Kindle 3 (WiFi)
Quote:
Originally Posted by cybmole View Post
PS - I found this rule:
"All other things being equal, the styles that are defined latest, i.e. written nearest to the actual HTML elements and read by the browser last, will over-rule earlier definitions."
Yes, this is how the "cascade" works. However what you're missing is that it only operates amongst those styles that are actually being applied to the HTML element. You gave the following example:

Code:
</head>
<body class="calibre">
<div class="calibre3" id="calibre_pb_0"></div>
<div class="calibre4" id="calibre_pb_1"></div>
<h2 class="calibre5" id="heading_id_6"><span class="none1">Chapter 6.</span>
<br class="calibre6" />
<br class="calibre6" /></h2>
<p class="noindent"><span class="none">   ... text.....</p>
and said:

Quote:
Originally Posted by cybmole View Post
...checked the margin definition in every class referenced above.

I still could only made your technique work by adding an explicit margin-bottom defn to my .noindent class
The reason for that is that the only CSS styles which are being applied to the paragraph in the example above, are the styles defined for the classes "calibre" and "noindent". The style defined for the class "none" is then applied to the (inline) text within the paragraph, but not to the (block) paragraph itself.
  • "calibre" applies to the BODY element, and all elements contained within it. Since the P element is contained within the BODY element, the style defined for the class "calibre" will apply to the P element.
  • "calibre3" applies to the first DIV element listed, but that is immediately closed, so the style isn't applied to anything further.
  • "calibre4" applies to the second DIV element listed, but that too is immediately closed, so this style isn't applied any further, either.
  • "calibre5" applies to the H2 element and everything it contains, but that element closes before the P element opens, so the style doesn't apply.
  • "none1" applies to the SPAN element contained within the H2 element, but doesn't apply beyond the end of the SPAN element.
  • "calibre6" only applies to each of the BR elements contained within the H2 element, and doesn't apply beyond those two elements.
  • We now get to the P element, which inherits the style defined for the "calibre" class assigned to the BODY element (since the P element is contained within the BODY element). In addition, the P element is given it's own class, "noindent", so the style defined for that class will be applied over the "calibre" style, since the "noindent" style was "defined latest, i.e. written nearest to the actual HTML elements and read by the browser last" and therefore "will over-rule earlier definitions".

Hope that's helped clarify this a bit further.
DMSmillie is offline   Reply With Quote