How to extract CSS Styles from @import url

Question

My HTML Data is as below. i have an import statement in Style Tag. I want to extract the CSS styles from the same and all the styles i want to apply only to the div tag with id second.

<!DOCTYPE html>
    <html>
    <head>
        <style>
            @import url(http://www.htmlhelp.com/style.css);
            p {color:green;}
        </style>
    </head>

    <body>
        <div id="first";>
            <h1>I am formatted with a linked style sheet h1 tag</h1>
            <p>Me too! p tag</p>
        </div>
         <div id="second";>
            <h1>Second Data h1</h1>
            <p>Second data p</p>
        </div>
    </body>
</html>

i checked Javascript Firefox - Unable to query cssRules if @import is present in stylesheet- bug or expected behavior? for reference, but is not working in my case. can anyone suggest me a solution or hint to work on.

You need to clarify what you mean exactly by extracting css styles. What do you exactly need to with them? What are you trying to do and what's the purpose of this? — Farid Nouri Neshat, May 20 '14 at 12:36
You'll have to write style, either inline or embedded, to override imported style. — Kunj, May 20 '14 at 13:01
i want to block the imported styles from getting applied to my second div tag., what i thought was there will be a way to extract all the styles mentioned in the imported style sheet and remove this import line from my html data, so that i can add a restriction to the styles from getting applied to my div. — Veena Sujith, May 21 '14 at 04:14
My intention is will restrict the p tag style only to div with id second, similarly the import rule ( @import url(http://www.htmlhelp.com/style.css); ) also i want to restrict. — Veena Sujith, May 21 '14 at 04:34

ImAtWar · Answer 1 · 2014-05-20T12:27:43.203

0

You need to use ''

  <style>
                @import url('http://www.htmlhelp.com/style.css');
                p {color:green;}
            </style>

Or just use:

<link rel="stylesheet" type="text/css" href="http://www.htmlhelp.com/style.css">

EDIT:

Just rename the div of your choice.

edited May 20 '14 at 12:27

answered May 20 '14 at 11:58

ImAtWar

1,073
3
11
23

sorry i think you didnt understand my question. When i am using as above, my entire content is getting the styles mentioned in the import url or link style sheet. I want only my second div tag to get these values.how can i restrict that. – Veena Sujith May 20 '14 at 12:24
Just use another div. – ImAtWar May 20 '14 at 12:28
i m totally confused. Can u help me by writing a sample html data, in which the imported styles will not get applied to the DIV. – Veena Sujith May 21 '14 at 04:13
http://stackoverflow.com/questions/17667874/limit-scope-of-external-css-to-only-a-specific-element My doubt is also same like this, but scoped style will not work in most of the browser. Other than iFrame any other alternatives is there ??? – Veena Sujith May 21 '14 at 04:38

How to extract CSS Styles from @import url

1 Answers1