|
did you want some texts in between your paragraph to be excluded from getting formatted by your external css but can't get it done? did you ever wonder why a text block isn't displayed as you wanted even if you already set the inline style to be of different format? why doesn't an inline style work? it still inherits the style set in the external stylesheet! here's a brief explanation why an inline style seemed not to work.
inline style does not seem to override external css, but it always does. take the below code for example:
style.css
.border {border:2px solid #000;}
.underline {text-decoration:underline;}
page.html
<link href="/style.css" type="text/css" rel="stylesheet" />
...
<p class="border">
inline style
<span style="border:none;">does not seem</span>
to override external css,
<span style="border:none;">but it always does.</span>
</p>
<p class="underline">
inline style
<span style="text-decoration:none;">does not seem</span>
to override external css,
<span style="text-decoration:none;">but it always does.</span>
</p>
in IE browser:
here, we have two files - the external stylesheet (style.css) and the html page (page.html). basically, we defined classes in style.css with styles to be displayed in page.html. in this case, we have two classes in style.css, namely, border and underline. then, we used these classes in page.html to format the two paragraphs <p>.
the first paragraph will be contained in a 2px-thick solid border as we defined in our border class. if you notice, we enclosed some texts with a <span> hoping to change the style border property to none. we aim not to include the enclosed texts to contain in our border, however, viewing it in a browser, this does not work.
in our second paragraph, we aim to exclude some texts from getting an underline, however, still, when viewing in a browser, it would still have an underline.
the explanation
technically, the browser actually sets our enclosed texts with the styles defined in our <span> tag - the first paragraph border to none and the second paragraph text-decoration to none; but, since the texts are contained within the paragraphs <p>, which have classes defined in our external stylesheet, the border property (of the first paragraph) and the text-decoration property (of the second paragraph) spans throughout the whole paragraph making it appear even in our inline style defined texts.
suggestion
if you really want to exclude texts in between paragraphs from getting formatted, you need to separate them new <p> tags. i suppose you don't want a line-break between these paragraphs, and so, you need to set the display property of the paragraph to inline. the following is a workaround:
style.css
.border {border:2px solid #000;}
.underline {text-decoration:underline;}
p {display:inline;}
page.html
<link href="/style.css" type="text/css" rel="stylesheet" />
...
<p class="border">inline style </p>
<span style="border:none;">does not seem</span>
<p class="border">to override external css, but it always does.</p>
<p class="underline">inline style </p>
<span style="text-decoration:none;">does not seem</span>
<p class="underline">to override external css, but it always does.</p>
in IE browser:
as encountered and tested, this conclusion, however, applies only to none-valued style properties.
|
