xml (TEI P5) visualisation method

I've encoded a book with xml, according to TEI P5 guidelines, and I'm trying to visualize it in an html page. The real aim is to visualize the encoded text with all its formatting tags of TEI P5 guidelines (text formatting, inner references, etc.). So, the big question is how we do this right?

{For the record: I've tried (and still trying) to "throw" the whole xml text in the html body, and edit the visualization in a parallel css stylesheet, which I link to the html <style>. But, something doesn't seem quite right...}

Any thought?? Any example??

Here an xml sample:

    <?xml version="1.0" ?>
<TEI version="5.0" xmlns="http://www.tei-c.org/ns/1.0">
    <!--here exists the teiHeader-->
   <text>
       <front>
            <div type="preface">
                <head rend="align(center)">
                    <hi rend="bold">title</hi></head>
                <p>Here is the prologue.Here is the prologue.</p>
                <p>And second para of prologue.</p>
                <p><ref target="#memories">Here is first reference to an xml:id, which have created to the teiHeader.</ref> Some more prologue. <ref target="#modernNovel">Here is the second reference to an xml:id, which have created to the teiHeader.</ref> and more prologue.</p>
                <closer>
                    <salute rend="align(right)">Dear readers</salute>
                    <signed rend="align(right)">signature</signed>
                </closer>
            </div>
       </front>
       <body>
            <ab type="title">
                <title rend="align(center)" type="main">
                    TITLE
                </title>
                <lb/>
                <title rend="align(center)" type="desc">
                    Secondary title
                </title>
            </ab>
            <div n="1" type="chapter">
                <head rend="align(center)">
                    <hi rend="bold">Chapter 1 <lb/>name of the chapter.</hi>
                </head>
                <p>Here is the real text, and text, and more text. Again the text, and text, and more text.Again the text, and text, and more text.An finally the name <placeName xml:id="London"> <hi rend="bold">London</hi></placeName>, appears here.</p>
                <p>Here is the real text, and text, and more text. Again the text, and text, and more text.Again the text, and text, and more text.An the name <ref target="London"> <hi rend="bold">London</hi></ref>, repeat itself.</p>
            </div>
       </body>

Solution

Your use of the @rend attribute suggests that you're trying to use it to supply CSS styling properties. If that's so, you might find it easier to use the @style or @rendition attributes instead, since these are intended for that purpose. Remember however that all three of these attributes are intended to describe the rendition of the source. The TEI doesn't (as yet) provide ways of specifying how particular components of a document should be processed: this was considered out of scope for the original project. However, there is work being done in the area of defining a "processing model" for TEI elements, which should appear in the Guidelines soon. See for example the TEI Simple project.