learn-what-you-see.com - CSS: Grundlagen 005

1.5 Elemente manipulieren

Eine weitere Möglichkeit, um CSS Regeln an HTML Elemente zu übergeben, bietet uns das <style> Tag. Bei dieser Methode fassen wir alle CSS Regeln in einem Block im Kopfbereich der Website zusammen.

<head>

  <style type="text/css">

    CSS Regeln

  </style>

</head>

Listing 1.5.1: Das <style> Tag

Damit die Zuordnung der CSS Regeln auf ein HTML Element eindeutig ist, benötigen wir bei dieser Methode einen sog. Selektor. Dieser wird im <style> Block notiert. Innerhalb von geschweiften Klammern folgt die CSS Regel.

<head>

  <style type="text/css">

    Selektor {
      Eigenschaft: Wert;
    }

  </style>

</head>

Listing 1.5.2: Aufbau von CSS Regeln

Wenn wir jetzt zum Beispiel allen Überschriften in einem Dokument eine andere Schriftfarbe zuteilen möchten, nutzen wir den entsprechenden Selektor und weisen diesem neue CSS Regeln zu.

 <head>

   <style type="text/css">

     h1 {
       color: #B40000;
     }

   </style>

 </head>

Listing 1.5.3: CSS Regeln einem Element zuordnen

Die Selektoren

CSS Selektoren bestehen einfach aus dem HTML Elementennamen. Dieser wird ohne spitze Klammenrn notiert. Es folgen geschweifte Klammern. Alles was zwischen diesen Klammern notiert wird, wird dem vorangestelltem Selektor zugeordnet! Jede CSS Regel muss dabei mit einem Semikolon (;) beendet werden!

 Selektor {
   Eigenschaft: Wert;
   Eigenschaft: Wert;
 }

Listing 1.5.4: Selektor mit CSS Regeln

Eine kurze Analyse

Mit dieser Methode kommen wir unserem Ziel schon etwas näher, die Layouteigenschaften vom Inhalt zu trennen. Wir sind nun in der Lage, zentral CSS Regeln für die Elemente einer Webseite zu notieren! Die Regeln greifen bei allen gleichartigen Elementen und müssen damit nicht mehrfach notiert werden. Änderungen sind erheblich einfacher zu Realisieren und die Übersicht ist gesteigert!

1.5.1 Das HTML Dokument

In diesem Zuge verändern wir den Code der Seite ein wenig. Wir schreiben jetzt den CSS Code innerhalb der <style> Tags in den Kopfbereich des Dokuments.

 <!DOCTYPE html>
 <html lang="de">

 <head>

   <style type="text/css">

     h1 {
       color: #B40000;
     }

   </style>

   <meta charset="utf-8" />

   <title>Arbeit mit CSS</title>

 </head>


 <body>

   <main>

     <section>

       <h1>Willkommen auf unserer Internetseite</h1>

         <p>
           ... unverändert ...
         </p>

     </section>


     <section>

       <h1>Über CSS</h1>

         <p>
           ... unverändert ...
         </p>

       </section>

   </main>

 </body>

 </html>

Listing 1.5.5: HTML Dokument anpassen

Sehen Sie sich das Ergebnis an! Alle Überschriften der Ersten Ordnung erhalten eine neue Schriftfarbe.

Beispiel CSS 003 — Erstes HTML Dokument mit CSS (Beispiel anzeigen)

< Zurück Zum Seitenanfang springen Weiter >