Kleines Nachschlagewerk Informatik
CSS-Klassen
Worum geht es?
Die style-Optionen in den einzelnen Befehlen sind zum Teil ganz schön lang. Auch kommt es oft zu Wiederholungen. Es wäre doch schön, wenn man verschiedene Einstellungen (Font, Farbe, Größe etc.) zusammen fassen könnte.

Eine solche Zusammenfassung heißt Klasse.
Elemente ändern
CSS-Definitionen legt man am Anfang im Bereich head fest. Zwischen style-Tags schreibt man die Definitionen. Das sieht so aus:

      <html>
      <head>
          <style type="text/css">
              h1 { color:green ;}
          </style>
      </head>
      <body>
          <h1> Überschrift </h1>
          Der Text
      </body>
      </html>
            
Im Beispiel sieht man, dass h1, also die größte Überschrift, verändert wird. Man gibt das Element an und schreibt die Eigenschaften in geschweifte Klammern.

Und so sieht es aus: Drücken
Erstellen einer eigenen Klasse
Bei Textbereichen (siehe span und div) ist es manchmal sinnvoll, eigene Klassen festzulegen. Zum Beispiel sind alle HTML-Beispiele auf dieser Seite in einer speziellen Form geschrieben. Sieht man sich den Quelltext dieser Seite an, so findet man an verschiedenen Stellen

      <pre class="sourcecode">
      ...
      </pre>
            
pre bedeutet nur, dass alle Leerzeichen am Anfang und alle Zeilenumbrüche übernommen werden. Aber was sorgt für das Aussehen? Das steht in der Klasse sourcecode, die man sich selbst festlegen kann:

      .sourcecode {
          font-family: Courier New, Courier, monospace;
          font-size: 1.0em;
          color: #101010;
          padding-bottom: 10px;
      }
            
Eine eigene Klasse beginnt also mit einem Punkt und dann folgt der Name, den man sich selbst ausdenken kann. Hier in diesem Beispiel werden Zeichensätze mit fester Breite (das sieht schöner aus bei Quelltexten) gefordert. Die sollen grau und in Standardgröße sein. Unten soll etwas Platz (10 Pixel) sein. Immer, wenn man genau dieses Aussehen benötigt, nimmt man diese Klasse. Und das geht in allen HTML-Elementen.

Und wo definiert man diese Klassen? Das macht man wieder im Style-Bereich wie oben schon gezeigt.
CSS-Dateien
Eine große Webseite besteht aus mehreren HTML-Seiten. Hat man z.B. über CSS festgelegt, dass alle Überschriften grün sein sollen und findet blau später viel besser, so muss man dies in allen Dateien ändern. Das ist viel Arbeit und meistens vergisst man auch die eine oder andere Datei.

Es wäre also schön, wenn man alles an einer Stelle hat. Dazu schreibt man alles in eine Datei (z.B. definitionen.css) und verweist auf diese Datei.

      <html>
          <head>
              <title>Meine Webseite</title>
              <link rel="stylesheet" type="text/css" href="definitionen.css">
          </head>
          <body>
          ...
            
So, wie es innerhalb <style> stand, so steht es dann auch in dieser Datei. Man kann die Sachen also einfach kopieren.
Ausblick
Das, was hier gezeigt wurde, ist natürlich noch lange nicht alles. Man kann in CSS sehr viele Sonderfälle definieren. Aber das ist für uns noch zu viel des Guten. Interessierte finden hier mehr Informationen.