<?xml version="1.0" ?>
<?xml-stylesheet type="text/xsl" href="slides.xsl"?>
<slides name="presentation" xmlns="http://www.hoise.com/vmp/manual/1.0">

<title>CSS an introduction</title>

<!--================================================================-->
<slide>
<title>CSS - An introduction
 </title>
  <content>
<p align="center">
Ad Emmen<br/> 
Genias Benelux<br/> 
James Stewartstraat 24 <br/> 
NL-1325 JN Almere<br/> 
The Netherlands<br/> <br/>
emmen@genias.nl<br/> 
 http://www.genias.nl/<br/> 

</p>
<p align="center">May  2001<br />
Almere<br />
</p>
 </content>
</slide>
<!--================================================================-->

<!--

<slide>
 <title>
  Agenda
 </title>
  <content>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li> 
    </ul>

  </content>
</slide>
-->
<!--================================================================-->




<slide>
 <title>
Why CSS
 </title>
  <content>
    <ul>
      <li>XML separates contents from formatting</li>
      <li>An XML-tag like &lt;b&gt; does not  mean anything by itself</li>
      <li>For instance Bold, Big, Brown, Bubble</li>
      <li>You need a formatting instruction to tell how it should be formatted</li>
      <li>That is where stylesheets come in</li> 
    </ul>

  </content>
</slide>
<!--================================================================-->



<slide>
 <title>
 XML Stylesheet languages: CSS and XSL
 </title>
  <content>
    <ul>
      <li>Cascading Style Sheets (CSS)</li>
       <ul> 
         <li>Same as for HTML</li>
         <li>Tell how each element should be displayed</li>
         <li>Useful for computer displays</li>   
      </ul>   
     <li>Extensible Stylesheet Language (XSL)</li>
     <ul> 
       <li>More powerful</li> 
       <li>Also for printing and other display units</li>
       <li>Detailed control over lay-out</li>
       <li>Elements can be rearranged - transformed - before display</li>
    </ul>
   </ul>
  </content>
</slide>
<!--================================================================-->


<!--================================================================-->

<slide>
 <title>
  A basic CSS stylesheet
 </title>
  <content>
    <ul>
      <li>CSS is written in its own non-XML language</li>
       <li>For each XML-element a set of rules is defined</li>
      <li>Consists of properties wiht associated values</li>
 
<pre>
<![CDATA[
  slides {display: block; 
          font-family: Times;}      
]]>
</pre>


      <li>For all elements "slides" the property "display" is set to "block" i.e. a standard paragraph style</li> 
     <li>For all elements "slides" the property "font-family" is set to "Times" </li>
     </ul>

  </content>
</slide>


<!--================================================================-->

<slide>
 <title>
  Cascading stylesheets
 </title>
  <content>
    <ul>
      <li>The properties hold for all the elements and all the contents</li>
      <li>Hence it cascades down</li>
      <li>When you define the styles for a contained element tan those are taken from then on</li>
      <li>Properties not redefined are still taken from the container element</li>
      <li>Comments not XML style but: </li> 
<![CDATA[
  /* comment text */    
]]>
    </ul>

  </content>
</slide>


<!--================================================================-->

<slide>
 <title>Attach a CSS stylesheet to an XML-document  
 </title>
  <content>
    <ul>
      <li>With xml-stylesheet processing intruction:</li>
 <pre>
      
<![CDATA[
<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="../css/slides.css"?>
]]>
</pre>
      <li>The "href" must point to the stylesheet file</li>
      <li>Must be a URL. </li>
      <li>Can be relative or a full "http://" address</li>
    </ul>

  </content>
</slide>


<!--================================================================-->


<slide>
 <title>
  Display property
 </title>
  <content>
    <ul>
 <pre>
      
<![CDATA[
  display: block;
  display: list-item;
  display: none;

]]>
</pre>



      <li>"Block" is used for standard paragraphs</li>
      <li>"None" is used for no display</li>
      <li>"List-item" is used within lists</li>
    </ul>

  </content>
</slide>

<!--================================================================-->


<slide>
 <title>
  Font property
 </title>
  <content>
    <ul>
 <pre>
      
<![CDATA[
  font-family: Verdana;
  font-size: 16pt;
  font-style: italic;
  font-weigth: bold;
]]>
</pre>

      <li>"Font-family" choose a general available font like "Helvetica" or "Times" or a generic one: "sans-serif, serif, monospace"</li>
      <li>"Font-size" with unit; pt, px, cm, or mm</li>
      <li>"Font-style" for making text Italic</li>
    </ul>

  </content>
</slide>



<!--================================================================-->

</slides> 

