Z656: XML & CSS Lab

Write CSS to style the following XML code to look more or less like the printed page from which it is derived. In your CSS, use a Web font downloaded from Font Squirrel or some other source.

<titlePage xmlns="http://www.tei-c.org/ns/1.0">
  
    <docTitle rendition="#center">
        <titlePart type="main">
            <hi rendition="#x-large #uppercase">The Poems</hi>
            <lb/>
            <space dim="vertical" unit="line" quantity="1"/>
            <hi rendition="#small #uppercase">of</hi>
            <lb/>
            <space dim="vertical" unit="line" quantity="1"/>
            <hi rendition="#red #xx-large #uppercase">Algernon Charles Swinburne</hi>
            <lb/>
            <space dim="vertical" unit="line" quantity="3"/>
            <hi rendition="#large #uppercase">In Six Volumes</hi>
            <space dim="vertical" unit="line" quantity="4"/>
        </titlePart>
        <lb/>

        <titlePart rendition="#uppercase" type="main">Volume I.<lb/><space dim="vertical" unit="line" quantity="1"/>
            <hi rendition="#red #x-large">Poems and Ballads</hi><lb/>
            <space dim="vertical" unit="line" quantity="1"/>First Series <space dim="vertical" unit="line" quantity="5"/></titlePart>

    </docTitle>

    <docImprint rendition="#center #uppercase">
        <pubPlace>London</pubPlace>
        <lb/>
        <publisher rendition="#red #expanded">Chatto &amp; Windus</publisher>
        <lb/>
        <docDate when="1904" rendition="#small"/>
    </docImprint>

</titlePage>
                
graphic
Figure 1. Title page from the first volume of Swinburne's collected Poems (London: Chatto & Windus, 1904).