How to delete global style declaration

This site is best viewed in a modern browser with JavaScript enabled.

krishnavashisth

Hi,

I've an HTML page referencing to external css file theme1.css.
Theme1.css has global declaration of:

 * { font-size: 12px; }

I've a limitation for not to amend changes in the css file. As this is commonly used for other HTML files.

Is there any idea, that I could delete or skip this declaration to be executed at every time my page renders to the browser?

-Krishna

holyhttp

There is really no need to delete that style. Just override it through the cascading process of css. That means if you have an HTML element affected by that global style that you want to change, just create a CSS selector for that element then redefine the font-size property to any value you want.

You could also just redefine {font-size:13px / or any default value you want /}
in a external stylesheet placed below the line where Theme1.css is declared in your HTML or you can just embed the style below the Theme1.css declaration:
e.g.
<style type="text/css">
{font-size:13px / or any default value you want /}
</style>

Using an external styleheet allows you to make global changes throughout your web site.

krishnavashisth

Hi holyhttp,

Thank you for your advise. Please see below exact piece of HTML code:

<html>
 <head>
  <title> New Document </title>
  <style>
	* { font-size: 8px; }
	.s1 { font-size: 12px; }
	.s2 { font-size: 24px; }
  </style>
 </head>
 <body>
  <p class="s1">This has style 1</p>
  <p class="s2">This has style 2</p>
  <p>This has no style</p>

  <!-- 
  ckEditor code begins
  The below code is an auto generated code from ckeditor so we 
  cannot control the way the ckeditor generates HTML source code
  -->
  <p style="text-align: center; color: blue">
	<span style="font-size: 26px">
		<strong>
			<span style="background-color: rgb(0,0,255)">
				<span style="color: rgb(0,255,255)">
					This is a problem area
				</span>
			</span>
		</strong>
	</span>
  </p>
  <!-- ckEditor code end -->

 </body>
</html>

The first two <p> elements above here are picking its own defined style attribute

<p class="s1">
<p class="s2">

overriding global style.

* { font-size: 8px; }

But the ckEditor auto generated HTML code doesn't do so. This is my exact issue, why ckEditor code is picking the global font-size as 8px, instead of picking its own declared style in <span> element:

<span style="font-size: 26px">

Kindly suggest.

-Krishna

nap0leon

It's a inheritance issue.

In the presence of another style that is already defined for span in question, the "style" tag on a parent's parent node will not pass down to the child nodes (or the child's child nodes).

To accomplish what you are looking for, you will need to add the font-size to each of your spans.

e.g.,

<html>
 <head>
  <title> New Document </title>
  <style>
	* { font-size: 8px; }
	.s1 { font-size: 12px; }
	.s2 { font-size: 24px; }
  </style>
 </head>
 <body>
  <p class="s1">This has style 1</p>
  <p class="s2">This has style 2</p>
  <p>This has no style</p>

  <!-- 
  ckEditor code begins
  The below code is an auto generated code from ckeditor so we 
  cannot control the way the ckeditor generates HTML source code
  -->
  <p style="text-align: center; color: blue">
	<span style="font-size: 26px;">
		<strong>
			<span style="font-size: 26px; background-color: rgb(0,0,255)">
				<span style="font-size: 26px; color: rgb(0,255,255)">
					This is a problem area
				</span>
			</span>
		</strong>
	</span>
  </p>
  <!-- ckEditor code end -->

 </body>
</html>

krishnavashisth

Hi nap0leon,

Yes it is an inheritance issue, but my problem is the font-size added on <span> elements below can't be amended at my page, because this code is ckEditor generated HTML code, which is beyond my control of customizing elements.
Is there any other alternative fix to this situation?

-Krishna