Doing more playing in the CSS someone pointed me towards
CSS play and view - try it
Which if you put this ( in the left hand side) and push the "click me" button you get to see the result and so is easy to play with it:
Code:
<html>
<head>
<style type="text/css">
body {
font-family: "Courier New", Monospace;
}
p.action {
text-align: left;
margin-left: 0px;
margin-right: 0px;
}
p.character {
text-align: left;
margin-left: 50%;
margin-right: 10px;
margin-bottom: 0px;
margin-top: 8px;
}
p.dialog {
text-align: left;
margin-left: 20%;
margin-right: 30px;
margin-top: 0px;
margin-bottom: 0px;
}
p.sceneheading {
text-align: left;
text-transform: uppercase;
}
p.sceneheading:before {
margin-bottom: -16px ! important;
}
p.sceneheading:after {
margin-top: -16px ! important;
}
p.transition {
text-align: right;
text-transform: uppercase;
margin-right: 15px;
}
p.parenthetical {
text-align: left;
margin-left: 23%;
margin-right: 20px;
}
</style>
</head>
<body>
<p id="FeCELmf0" scenestr="1" scenenumber="1" class="sceneheading">1 EXT
PEGASUS HOUSE - DAY 1</p>
<p class="action">Pegasus House is an impressive Georgian pile lapped by
extensive grounds. From the rear, nicely framed by ancient oaks, we see
peacocks on the lawn, hear the trickle of water, sense the peace and the
solitude. Off-screen, over a further selection of exterior shots, we hear a
snatch of dialogue. Malcolm Parkinson, the Director of Pegasus House, is a
Yorkshireman. Bonnie, his wife, comes from London. She has a mddle class accent.</p>
<p class="character">PARKINSON</p>
<p class="dialog">Have you got it, Bonnie?</p>
<p class="character">BONNIE</p>
<p class="dialog">Yes. It's here.</p>
<p class="character">PARKINSON</p>
<p class="dialog">Give it me then, I'll take it through We hear a door open and
close. Then more dialogue. Different male voice, older, softer. This is Martin
Prideaux, the CHAPLAIN.</p>
<p class="character">CHAPLAIN</p>
<p class="dialog">Unusual, don't you think?</p>
<p class="character">BONNIE</p>
<p class="dialog">Very.</p>
<p class="character">CHAPLAIN</p>
<p class="dialog">Are we comfortable with this?</p>
<p class="character">BONNIE</p>
<p class="dialog">No. If you want the truth, I think it's wierd. A period of
silence. Then the sound of a door opening.</p>
<p class="character">PARKINSON</p>
<p class="dialog">He's ready. But he wants me to stay.</p>
<p class="character">BONNIE</p>
<p class="dialog">Stay? You mean watch him?</p>
<p class="character">PARKINSON</p>
<p class="dialog">Yes.</p>
<p class="character">BONNIE</p>
<p class="dialog">Christ...sorry, Martin. We hear the door close again.</p>
<p id="HeCEErg0" scenestr="2" scenenumber="2" class="sceneheading">2 INT ANTE
ROOM - DAY 2</p>
<p class="action">Bonnie and the chaplain sit in the ante room. The room is
elegantly appointed: a scatter of period furniture, panelled walls, polished
oak floor. No windows. Bonnie is in her late thirties, conservatively dressed,
attractive, a hint of nerves beneath her businesslike poise. The chaplain, an
older man, wears his clerical garb.</p>
<p class="character">CHAPLAIN</p>
<p class="dialog">It's never easy, is it?</p>
<p class="character">BONNIE</p>
<p class="dialog">No. Especially doing it this way.</p>
</body>
</html>
Shows how a web browser views the code. Which is not a bad way to start understanding these things still not 100% certain how to undertand the differences
But slowly getting there.