082 Cascading Style Sheets

Demo 2: Externe Stilvorlagen, Datei "Stil-001.css"

      Hallo 08

      Hallo 10

      Hallo 12

Das ist ein Kastentext

Huber Toni

Hallo

Der HTML-Code dieser Seite bis hierher:

<html>

   <head>
      <title>082 Style Sheets</title>
      <meta http-equiv="Content-Style-Type"   content="text/css">
      <link rel="StyleSheet" href="Stil-001.css" type="text/css">
    </head>

   <body>
      <h1>082 Cascading Style Sheets</h2>

      <h2>Demo 2: Externe Stilvorlagen, Datei "Stil-001.css" </h2>

      <hr>
      <pre class="p08">
      Hallo 08
      </pre>

      <pre class="p10">
      Hallo 10
      </pre>

      <pre class="p12">
      Hallo 12
      </pre>

      <p class="box">
      Das ist ein Kastentext
      </p>

      <p class="cb12">Huber Toni </p>
      Hallo
.....................
.....................

Die externe Stil-Vorlage Stil-001.css hat folgenden Inhalt:

<style type="text/css">
   <!--
   body { background-image: url(JPG-Hintergruende/Sand.JPG);
          font-family: Arial, Helvetica, sans-serif;   /* So werden in Style Sheets  */
          font-size: 10pt                              /* Kommentare geschrieben     */
        }

   h1 { font-size: 24pt;  color: blue }
   h2 { font-size: 20pt;  color: blue }
   h3 { font-size: 16pt;  color: blue }
   h4 { font-size: 14pt;  color: blue }
   h5 { font-size: 12pt;  color: blue }
   h6 { font-size: 10pt;  color: blue }

   p.ein { text-indent: 3em}       /* Absatz mit Einzug 3*Schrifthöhe */

   p.box { width:        50%;
           margin-left:  25%;
           margin-top:   2px;      /* negative Werte moeglich */
           border-width: 2px;
           border-color: blue;
           border-style: solid;
           background:   aqua;
           padding:      10px;
           text-align:   center
          }

   a:link    { color: blue   }     /* Farben der Links */
   a:active  { color: red    }
   a:visited { color: purple }

   pre.p08 { font-family: "Courier New", Courier, monospace;
             font-size:   8pt;
             color:       blue;
             margin-top:  0px      /* negative Werte moeglich */
           }
   pre.p10 { font-family: "Courier New", Courier, monospace;
             font-size:   10pt;
             color:       blue;
             margin-top:  0px      /* negative Werte moeglich */
           }
   pre.p12 { font-family: "Courier New", Courier, monospace;
             font-size:   12pt;
             color:       blue;
             margin-top:  0px      /* negative Werte moeglich */
           }
   .cb08   { font-family: "Courier New", Courier, monospace;
             font-size:   8pt;
             color:       blue;
           }
   .cb10   { font-family: "Courier New", Courier, monospace;
             font-size:   10pt;
             color:       blue;
           }
   .cb12   { font-family: "Courier New", Courier, monospace;
             font-size:   12pt;
             color:       red;
           }
    -->
</style>

Zurück zur Startseite