Creating CSS from a HTML file

Question

I have an html file which contains many elements:

<div>
    <div id="imgElt11289447233738dIi15v" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; Z-INDEX: 1; LEFT: 795px; BORDER-LEFT: 0px; WIDTH: 90px; CURSOR: auto; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 186px; HEIGHT: 93px" lineid="lineid" y2="279" y1="186" x2="885" x1="795">
        <img style="WIDTH: 90px; HEIGHT: 93px" height="21" alt="Image" src="../images//k03.jpg" width="25" name="imgElt11289447233738dIi15vNI1m6G" tag="img"></img></div>
    <div id="imgElt11288263284216dIi15v" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; Z-INDEX: 1; LEFT: 660px; BORDER-LEFT: 0px; WIDTH: 147px; CURSOR: auto; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 1964px; HEIGHT: 22px" lineid="lineid" y2="1986" y1="1964" x2="807" x1="660">
        <img style="WIDTH: 147px; HEIGHT: 22px" height="21" alt="Image" src="../images//k03.jpg" width="25" name="imgElt11288263284216dIi15vNI1m6G" tag="img"></img></div>
    <div id="txtElt11288262779851dIi15v" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; Z-INDEX: 2872735; LEFT: 250px; BORDER-LEFT: 0px; WIDTH: 95px; CURSOR: auto; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 1514px; HEIGHT: 18px" selectedindex="0" pos_rel="false" lineid="lineid" y2="1532" y1="1514" x2="345" x1="250" tag="div">
        <p><strong><font face="arial,helvetica,sans-serif" size="2">Course Name</font></strong></p>
    </div>
    <div id="txtElt11288262309675dIi15v" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; Z-INDEX: 1565881; LEFT: 40px; BORDER-LEFT: 0px; WIDTH: 430px; CURSOR: auto; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 1464px; HEIGHT: 34px" selectedindex="0" pos_rel="false" lineid="lineid" y2="1498" y1="1464" x2="470" x1="40" tag="div">
        <p><strong>
        <font face="arial,helvetica,sans-serif" size="2" tag="font">16. Please 
        write below the Course Name in order of preference.</font></strong></p>
        <p tag="p"><strong><font face="Arial" size="2" tag="font">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (Please 
        see the &quot;Instructions to Candidate&quot; for list of courses)</font></strong></p>
    </div>
</div>

As can be seen, 1 div has many divs in it. Now I want to create a css file that will contain all the styling of this html page (need not be same). Have to write something in java code. I have the DOM object of this file available to me.

Basically, I want all the styles to be removed from here and will be kept under a CSS file like for div with id = imgElt11289447233738dIi15v css will be:

#imgElt11289447233738dIi15v{BORDER-RIGHT: 0px; BORDER-TOP: 0px; Z-INDEX: 1; LEFT: 795px; BORDER-LEFT: 0px; WIDTH: 90px; CURSOR: auto; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 186px; HEIGHT: 93px}

I am don't till this part but since I don't know how many levels of hierarchy of elements will be there is there any way to do the same for all child elements as well?

I used the following code

public static Document getStyleInCSSfile(Document aoDoc, String aoPathToWrite, String aoFileName) throws ApplicationException {
    String loValue = null;
    String loID = null;
    String lsContent = "";
    Element loRoot = aoDoc.getRootElement();
    List loTempElementList = loRoot.getChildren();
    int liCounter;
    for (liCounter = 0; liCounter < loTempElementList.size(); liCounter++) {
        Element loTemplateEle = (Element) loTempElementList.get(liCounter);
        String loId=loTemplateEle.getAttribute("id").getValue();
        loID = loTemplateEle.getAttributeValue("id");
        if(null != loID)
        {
            loValue = loTemplateEle.getAttributeValue("style");
            if(loValue!=null && loValue.trim().length()>0)
            {
                loTemplateEle.removeAttribute("style");
                lsContent = lsContent.concat("#"+loID+"{"+loValue+"}\n");
            }
        }
    }
    SaveFormOnLocalUtil.writeToFile(aoPathToWrite,aoFileName,lsContent);
    return aoDoc;
}

Edit : got to know that some regular expression may help by getting a string of SAX parser object and and using regular expression on it... any idea? any one? how to implement it

Answer 1

is it effective to define a style for each single tag?
if i were you i'd checked if any other tag has the same style and if all elements with one style had the same 'tag_name' i'd used the following:

tag_name{text-transform:uppercase;text-align:center;}

and every element with this tag name (if its' style isn't set in any other way) would have this style.
if there's a lot of different tags with the same style:

.class_name{text-transform:uppercase;text-align:center;}

<tag class="class_name">content</tag>