HTML, CSS, PHP, MySQL

html-php.de

HTML & CSS Stylesheets Referenz JavaScript PHP MySQL Sonstiges Gästebuch Inhalt Impressum

[ CSS-Formate ] [ CSS im Head-Bereich ] [ Separate CSS-Datei ] [ CSS im Body-Bereich ] [ Klassen definieren ] [ Individualformate ]

CSS-Formate definieren

Elementen kann man Formate zuweisen, um die Schriftfarbe, Hintergrundfarbe, Schriftart, Rahmen und Größe zuzuweisen, um nur einige zu nennen. Um Elemente diese CSS-Formate zuzuweisen, gibt es drei Möglichkeiten, im head, body und in einer seperaten *.css-Datei.

Im HEAD-Bereich Formate definieren

Im folgenden Beispiel wird eine Seite mit der Untergrundfarbe braun body, ein Kopf über eine Überschrift der ersten Ordnung h1 und ein Abschnitt p in der Schriftart Arial oder Helvetica definiert.

  <!DOCTYPE HTML>
  <html lang="de">
  <head>
   <title>Meine erste Website</title>
   <meta charset="utf-8">
   <style type="text/css">
    <!--
    body {
     background-color:#F4A460;
    }
    h1 { 
     font-size:24pt; font-style:italic; font-family:Arial, Helvetica; 
     background-color:#0000FF; color:#FFFF00; 
     border:6px double navy;
     height:34px; text-align:center;
    }
    p {
     font-size:16pt; font-family:Arial, Helvetica;
    }
    -->
   </style>
  </head>
  <body>
   <h1>Meine erste Homepage</h1>
   <p>So k&ouml;nnte meine erste Homepage aussehen.</p>
  </body>
  </html>
Das ganze sieht so aus

Formate in einer separaten Datei definieren

Eine weitere Möglichkeit, um Stylesheet-Formate festzulegen, ist das Anlegen einer separaten Datei mit der Dateierweiterung *.css (z.B. homepage.css). Der Head-Bereich sieht dann wie folgt aus:

  <!DOCTYPE HTML>
  <html lang="de">
  <head>
   <title>Meine erste Website</title>
   <meta charset="utf-8">
   <link rel="stylesheet" type="text/css" href="homepage.css">
  </head>
  <body>
    <h1>Meine erste Homepage</h1>
    <p>So k&ouml;nnte meine erste Homepage aussehen.</p>
  </body>
  </html> 

Mit den Befehl <link rel="stylesheet" type="text/css" href="homepage.css"> wird die Datei festgelegt, in der die Formate festgelegt sind. Dieses hat den Vorteil, dass die Formate in allen Dateien deines Projektes das gleiche aussehen geben können. Die Datei sieht in etwa so aus:

   body {
     background-color:#F4A460;
   }
   h1 { 
     font-size:24pt; font-style:italic; font-family:Arial, Helvetica; 
     background-color:#0000FF; color:#FFFF00; 
     border:6px double navy;
     height:34px; text-align:center;
   }
   p {
     font-size:16pt; font-family:Arial, Helvetica;
   }
Das ganze sieht genauso aus, wie im ersten Beispiel

Formate im Body-Bereich definieren

Aber auch direkt im Body-Bereich können CSS-Stylesheets festgelegt werden. Wenn Sie das oben gezeigte Format beibehalten wollen, sieht der Code wie folgt aus:

  <!DOCTYPE HTML>
  <html lang="de">
  <head>
   <title>Meine erste Website</title>
   <meta charset="utf-8">
   <meta http-equiv="Content-Style-Type" content="text/css">
  </head>
  <body style="background-color:#F4A460;">
    <h1 style="font-size:24pt; font-style:italic; font-family:Arial, Helvetica;
      background-color:#0000FF; color:#FFFF00; border:6px double navy;
      height:34px; text-align:center;">Meine erste Homepage</h1>
    <p style="font-size:16pt; font-family:Arial, Helvetica;">
    So k&ouml;nnte meine erste Homepage aussehen.</p>
  </body>
  </html> 
Das ganze sieht genauso aus, wie im ersten Beispiel

Hinter den einleitenden HTML-Element wird das Attribut style= notiert und in Anführungszeichen eingeschlossen, dann die Eigenschaften und Werte gesetzt. Als Meta-Tag sollten noch mitteilen, dass Sie mit CSS-Stylesheets arbeiten meta http-equiv="Content-Style-Type" content="text/css"

Formate für Klassen definieren

Sie können für gleiche Elemente verschiedene Formate definieren. Dabei legen Sie im head-Bereich oder einer separaten .css-Datei die Formate mit .name {Eigenschaft:Wert} fest. Anwenden lassen sich die Formate im leinleitenden HTML-Element mit den Attribut class="name".
Im folgenen Beispiel legt man für Abschnitte mehrere Klassen an:

  <!DOCTYPE HTML>
  <html lang="de">
  <head>
   <title>Meine erste Website</title>
   <meta charset="utf-8">
    ...
   <style type="text/css">
    <!--
     h1 { font-size:24pt; }
     p { font-size:12pt; }
     body { background-color:#FFFFCC;margin-left:100px; }
     p.blue { font-family:Arial; color:#0000FF; }
     p.red {  font-family:Arial; color:#FF0000; }
     .green { font-family:Arial; color:#00FF00; }
    -->
   </style>
  </head>
  <body>
   <h1 class="green">Grüne Überschrift</h1>
   <p class="blue">Dieser Abschnitt ist blau</p>
   <p class="green">Dieser Abschnitt ist grün</p>
   <p class="red">Dieser Abschnitt ist rot, 
     und hat ein grünes <span class="green">Wort</span></p>
  </body>
  </html> 
Das ganze sieht dann so aus

Individualformate definieren

Individualformate werden mit dem Gitter # definiert und im HTML-Element mit den Attribut id das Format zugewiesen.

  <!DOCTYPE HTML>
  <html lang="de">
  <head>
   <title>Meine erste Website</title>
   <meta charset="utf-8">
    ...
   <style type="text/css">
    <!--
     body { background-color:#F4A460; }
     h1 { 
      font-size:24pt; font-style:italic; font-family:Arial, Helvetica; 
      background-color:#0000FF; color:#FFFF00; 
      border:6px double navy;
      height:34px; text-align:center;
     }
     p { font-size:16px; font-family:Arial, Helvetica; }
     div#rot { border:6px double red; }
     h2#urot { color:red; font-size:20px; }
     #green { border:6px double green; }
     #ugreen { color:green; font-size:20px; }
    -->
   </style>
  </head>
  <body>
   <h1>Meine erste Homepage</h1>
   <div id="rot">
     <h2 id="urot">Rote &Uuml;berschrift</h2>

     <p>Dieses ist der rote Bereich</p>
   </div>
   <div id="green">
     <h2 id="ugreen">Gr&uuml;ne &Uuml;berschrift</h2>

     <p>Dieses ist der gr&uuml;ne Bereich</p>
   </div>
  </body>
  </html> 
Das ganze sieht dann so aus

Vor dem Gatter # können Sie ein HTML-Element notieren. Würden Sie beim obengenannten Beispiel ein div mit den Namen id="urot" definieren, so wird dieses ignoriert. Beachten Sie, dass Individualformate nur einmal pro Seite definieren können.

back top next