11<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
22<html lang="en">
3- <!-- $Id: intro.src,v 2.21 1998-03-20 21:15:29 howcome Exp $ -->
3+ <!-- $Id: intro.src,v 2.22 1998-03-20 22:38:40 bbos Exp $ -->
44<HEAD>
55<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
66<TITLE>Introduction to CSS2</TITLE>
@@ -180,25 +180,25 @@ which user agents don't know how to display.
180180<P>Here is a simple XML fragment:
181181
182182<PRE class="xml-example">
183- <ARTICLE>
184- <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
185- <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
186- <PARA>
187- One evening, just as he was getting his
188- <INSTRUMENT>flute</INSTRUMENT> ready and his
189- musicians were assembled, an officer brought him a list of
190- the strangers who had arrived.
191- </PARA>
192- </ARTICLE>
183+ <ARTICLE>
184+ <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
185+ <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
186+ <PARA>
187+ One evening, just as he was getting his
188+ <INSTRUMENT>flute</INSTRUMENT> ready and his
189+ musicians were assembled, an officer brought him a list of
190+ the strangers who had arrived.
191+ </PARA>
192+ </ARTICLE>
193193</PRE>
194194
195195<P>To display this fragment in a document-like fashion, we must first
196196declare which elements are inline-level (i.e., do not cause line breaks) and
197197which are block-level (i.e., cause line breaks).
198198
199199<PRE class="example">
200- INSTRUMENT { display: inline }
201- ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
200+ INSTRUMENT { display: inline }
201+ ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
202202</PRE>
203203
204204<P>The first rule declares INSTRUMENT to be inline <!--(though this rule
@@ -211,17 +211,17 @@ the other elements to be block-level.
211211a processing instruction:
212212
213213<PRE class="xml-example">
214- <?XML:stylesheet type="text/css" href="bach.css"?>
215- <ARTICLE>
216- <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
217- <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
218- <PARA>
219- One evening, just as he was getting his
220- <INSTRUMENT>flute</INSTRUMENT> ready and his
221- musicians were assembled, an officer brought him a list of
222- the strangers who had arrived.
223- </PARA>
224- </ARTICLE>
214+ <?XML:stylesheet type="text/css" href="bach.css"?>
215+ <ARTICLE>
216+ <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
217+ <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
218+ <PARA>
219+ One evening, just as he was getting his
220+ <INSTRUMENT>flute</INSTRUMENT> ready and his
221+ musicians were assembled, an officer brought him a list of
222+ the strangers who had arrived.
223+ </PARA>
224+ </ARTICLE>
225225</PRE>
226226
227227<P>A visual user agent could format the above example as:
@@ -236,11 +236,11 @@ example, the headline font size should be larger than then rest of the
236236text, and you may want to display the author's name in italic:</P>
237237
238238<PRE class="example">
239- INSTRUMENT { display: inline }
240- ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
241- HEADLINE { font-size: 1.3em }
242- AUTHOR { font-style: italic }
243- ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }
239+ INSTRUMENT { display: inline }
240+ ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
241+ HEADLINE { font-size: 1.3em }
242+ AUTHOR { font-style: italic }
243+ ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }
244244</PRE>
245245
246246<p><img src="images/bach2.gif" alt="Example rendering">
0 commit comments