11<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
22<html lang="en">
3- <!-- $Id: intro.src,v 2.18 1998-03-14 23:38:42 ijacobs Exp $ -->
3+ <!-- $Id: intro.src,v 2.19 1998-03-16 12:45:37 howcome Exp $ -->
44<HEAD>
55<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
66<TITLE>Introduction to CSS2</TITLE>
@@ -183,7 +183,6 @@ which user agents don't know how to display.
183183 <ARTICLE>
184184 <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
185185 <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
186- <LOCATION>Potsdam</LOCATION>
187186 <PARA>
188187 One evening, just as he was getting his
189188 <INSTRUMENT>flute</INSTRUMENT> ready and his
@@ -199,31 +198,34 @@ which are block-level (i.e., cause line breaks).
199198
200199<PRE class="example">
201200 INSTRUMENT { display: inline }
202- ARTICLE, HEADLINE, AUTHOR, LOCATION, PARA { display: block }
201+ ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
203202</PRE>
204203
205204<P>The first rule declares INSTRUMENT to be inline (though this rule
206205is not strictly necessary, because 'inline' is the default), and the
207206second rule, with its comma-separated list of selectors, declares all
208207the other elements to be block-level.
209208
210- <P>It has not yet been finalized how style sheets will be linked to
211- XML documents, but assuming the above CSS fragment is combined with
212- the XML fragment, a visual user agent could format the result as:
209+ <P>One proposal for linking a style sheet to an XML document is to use
210+ a processing instruction:
213211
214- <p><img src="images/bach0.gif" alt="Example rendering">
215-
216- <!-- Don't forget image. Maybe drop the .gif suffix? -IJ -->
217- <!--
218- <PRE>
219- Fredrick the Great meets Bach
220- Johann Nikolaus Forkel
221- Potsdam
222- One evening, just as he was getting his flute ready
223- and his musicians were assembled, an officer brought
224- him a list of the strangers who had arrived.
212+ <PRE class="xml-example">
213+ <?XML:stylesheet type="text/css" href="bach.css"?>
214+ <ARTICLE>
215+ <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
216+ <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
217+ <PARA>
218+ One evening, just as he was getting his
219+ <INSTRUMENT>flute</INSTRUMENT> ready and his
220+ musicians were assembled, an officer brought him a list of
221+ the strangers who had arrived.
222+ </PARA>
223+ </ARTICLE>
225224</PRE>
226- -->
225+
226+ <P>A visual user agent could format the above example as:
227+
228+ <p><img src="images/bach1.gif" alt="Example rendering">
227229
228230<P>Notice that the word "flute" remains within the paragraph since it
229231is the content of the inline element INSTRUMENT.
@@ -234,13 +236,13 @@ text, and you may want to display the author's name in italic:</P>
234236
235237<PRE class="example">
236238 INSTRUMENT { display: inline }
237- ARTICLE, HEADLINE, AUTHOR, LOCATION, PARA { display: block }
238- HEADLINE { font-size: 1.5em }
239+ ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
240+ HEADLINE { font-size: 1.3em }
239241 AUTHOR { font-style: italic }
242+ ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }
240243</PRE>
241244
242- <p><img src="images/bach.gif" alt="Example rendering">
243- <!-- Don't forget image. Maybe drop the .gif suffix? -IJ -->
245+ <p><img src="images/bach2.gif" alt="Example rendering">
244246
245247<P>Adding more rules to the style sheet will allow you to further
246248improve the presentation of the document.
0 commit comments