CSS-Lehrbuch – Lektion 2 – Einstieg in CSS. CSS-Eigenschaften background, color.

26/05/2025, by Ivan

Hallo zusammen. In der letzten Lektion habe ich zwei Dateien erstellt: HTML und CSS. Hier ist ihr Code:

index.html:

<html>
 <head>
  <title>CSS-Lehrbuch</title>
  <link type="text/css" rel="stylesheet" media="all" href="style.css" />
 </head>
 <body>
  <p>Lernen Sie CSS mit drupalbook.org</p>
  <p>2. Zeile: Lernen Sie CSS mit drupalbook.org</p>
 </body>
</html>

style.css:

body{
  background: #eeeeee; /* Seitenhintergrund */
  font-size: 14px;     /* Schriftgröße */
}
p{
  color: #ff0000; /* Textfarbe */
}

In dieser Lektion setzen wir das Lernen von CSS fort und verleihen unserem Template Farbe und Stil. Beginnen wir mit der Eigenschaft background, die wir bereits für den body gesetzt haben:

body{
  background: #eeeeee; /* Seitenhintergrund */
  font-size: 14px;     /* Schriftgröße */
}

Wie Sie sehen, haben wir einen grauen Seitenhintergrund:

CSS

Kommen wir zuerst zur CSS-Syntax in der Datei. Alle CSS-Eigenschaften beginnen mit einem Selektor, der angibt, auf welche Elemente die Eigenschaften angewendet werden. Beispiele für Selektoren sind body, p, .class, #id. Dabei erkennen Sie, dass vor einem Selektor ein Punkt oder ein Rautezeichen stehen kann. Der Punkt steht für ein oder mehrere Elemente einer bestimmten Klasse, das Rautezeichen für ein einzelnes Element mit einer bestimmten ID. Hier ein Beispiel:

<html>
 <head>
  <title>CSS-Lehrbuch</title>
  <link type="text/css" rel="stylesheet" media="all" href="style.css" />
 </head>
 <body>
  <div class="green">
    <p>Lernen Sie CSS mit drupalbook.org</p>
  </div>
  <div id="blue">
    <p>2. Zeile: Lernen Sie CSS mit drupalbook.org</p>
  </div>
 </body>
</html>

Ich habe zwei Blöcke mit der Klasse green und der ID blue hinzugefügt, jetzt schreibe ich CSS für diese:

body{
  background: #eeeeee; /* Seitenhintergrund */
  font-size: 14px;     /* Schriftgröße */
}
 
.green{
  color: #00ff00; /* Textfarbe */
} 
 
#blue{
  color: #0000ff; /* Textfarbe */
}

CSS green color

Wie Sie sehen, schreibe ich CSS für das body-Tag ohne Punkt oder Raute, ebenso wie für andere Tags wie p, span, ul, li usw. Für Klassen verwenden wir den Punkt, für IDs die Raute. Merken Sie sich das am besten irgendwo, damit Sie es nicht vergessen:

Punkt – für Klassen

Raute – für IDs

Ohne Punkt und Raute – für Tags ohne Klasse oder ID

Nachdem wir den Tag, die Klasse oder die ID angegeben haben, schreiben wir den CSS-Code in geschweifte Klammern {}:

body{ /* Tag */
   
}
 
.green{ /* Klasse */
 
} 
 
#blue{ /* ID */
 
}

Wie Sie aus meinem kurzen HTML-Kurs wissen, sind class und id universelle Attribute für HTML-Tags, d.h. Sie können diese Attribute jedem Tag hinzufügen. So können wir verschiedenen Tags wie p, span, li unterschiedliche CSS zuweisen.

In den geschweiften Klammern schreiben wir CSS-Eigenschaften. Beginnen wir mit der einfachen Eigenschaft color. Color definiert die Textfarbe. Wir schreiben erst den Eigenschaftsnamen, danach nach dem Doppelpunkt den Wert. Für color kann man Werte numerisch oder als Namen angeben:

.green{
  color: #00ff00; /* Textfarbe */
} 
 
#blue{
  color: #0000ff; /* Textfarbe */
}
 
/* das Gleiche mit Farbnamen */
 
.green{
  color: green; /* Textfarbe */
} 
 
#blue{
  color: blue; /* Textfarbe */ 
}

Wenn wir die numerische Schreibweise in sechs hexadezimalen Zahlen verwenden, setzen wir ein Rautezeichen vor die Zahl. Die ersten beiden Ziffern geben an, wie viel Rot im Farbton enthalten ist, die dritten und vierten wie viel Grün, die fünften und sechsten wie viel Blau. Das ist das RGB-Schema (Rot, Grün, Blau). Hexadezimale Zahlen gehen von 0 bis F, wobei nach 9 nicht 10 kommt, sondern A. Zum Farbauswählen hilft Photoshop: Klicken Sie auf die Farbwahl und wählen Sie in der Palette die gewünschte Farbe.

colorpicker

Jetzt, da Sie wissen, wie Sie eine Farbe für die Eigenschaft color auswählen, können Sie auch die Hintergrundfarbe definieren. Ändern wir den Hintergrund und machen den Text besser lesbar:

body{
  background: #fafafa; /* Seitenhintergrund */
  color: #333; /* Textfarbe auf der gesamten Seite */
}
 
.green{
   /* Textfarbe */
} 
 
#blue{
   /* Textfarbe */
}

Wenn Sie mehrere CSS-Eigenschaften schreiben, verwenden Sie ein Semikolon, um das Ende der Eigenschaft zu kennzeichnen. Nun ist unsere Seite besser lesbar:

HTML CSS

Lassen Sie uns nun grüne und blaue Farben gezielt einsetzen:

index.html:

<html>
 <head>
  <title>CSS-Lehrbuch</title>
  <link type="text/css" rel="stylesheet" media="all" href="style.css" />
 </head>
 <body>
  <p><span id="blue">Lernen Sie CSS</span> mit <span class="green">drupalbook.org</span></p>
  <p>2. Zeile: Lernen Sie CSS mit <span class="green">drupalbook.org</span></p>
 </body>
</html>

Und style.css:

body{
  background: #fafafa; /* Seitenhintergrund */
  color: #333;
}
 
.green{
  color: #26e921; /* Textfarbe */
} 
 
#blue{
  color: #0f15f3; /* Textfarbe */
}

HTML CSS

Extra Block Types (EBT) - Neue Erfahrung im Layout Builder❗

❗Extra Absatztypen (EPT) - Erfahrung mit neuen Absätzen

CSS-Lehrbuch – Lektion 2 – Einstieg in CSS. CSS-Eigenschaften background, color.