Printable View
Hi,
I've an HTML page referencing to external css file theme1.css.
Theme1.css has global declaration of:
I've a limitation for not to amend changes in the css file. As this is commonly used for other HTML files.HTML Code:* { font-size: 12px; }
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
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.
Hi holyhttp,
Thank you for your advise. Please see below exact piece of HTML code:
The first two <p> elements above here are picking its own defined style attributeHTML 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>
overriding global style.HTML Code:<p class="s1">
<p class="s2">
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:HTML Code:* { font-size: 8px; }
Kindly suggest.HTML Code:<span style="font-size: 26px">
-Krishna
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.,
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="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>
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
