www.webdeveloper.com
Results 1 to 5 of 5

Thread: How to delete global style declaration

  1. #1
    Join Date
    Jan 2012
    Posts
    4

    How to delete global style declaration

    Hi,

    I've an HTML page referencing to external css file theme1.css.
    Theme1.css has global declaration of:
    HTML Code:
     * { 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

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    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.

  3. #3
    Join Date
    Jan 2012
    Posts
    4
    Hi holyhttp,

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

    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
    HTML Code:
    <p class="s1">
    <p class="s2">
    overriding global style.
    HTML Code:
    * { 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:
    HTML Code:
    <span style="font-size: 26px">
    Kindly suggest.

    -Krishna

  4. #4
    Join Date
    Nov 2007
    Posts
    425
    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>

  5. #5
    Join Date
    Jan 2012
    Posts
    4
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles