CSS Einleitung

CSS + Einbindung

Hier findest du erste Grundlagen zu CSS.

CSS bedeutet Cascading Style Sheets (übersetzt: Kaskadenstilentwurf) und ist die Programmiersprache für das Design einer Webseite. Mit Klassen und ID’s werden HTML-Objekte angesprochen und klar in ihrer äußeren Erscheinung definiert. Genauso können HTML-Elemente, wie bespielsweise die im Beitrag „HTML – Standardstruktur“ beschriebenen, allgemein definiert werden. 

Für folgendes Beispiel, programmieren wir ein passendes einfaches Design zu dem HTML-Code aus dem Beitrag „HTML-Standardstrukturen“.

Hier nochmal der Quellcode:

<!DOCTYPE html>
<html>
 <head>
  <title>Meine Webseite</title>
 </head>
 <body>
  <h1>Hallo Welt!</h1>
  <p>Das ist meine Webseite</p>
 </body>
</html> 

Wir möchten nun wie folgt designen:

  • Hintergrundfarbe: blau
  • Überschrift + Text mittig zentriert
  • Textfarbe: Rot
  • Überschriftenfarbe: schwarz 

Der Code dazu würde nun so aussehen:

<style>
 html{
  background-color: lightblue;
 }
 h1{
  color: black;
  text-align: center;
 }
 p{
 color: red;
 text-align: center;
 }
</style>

Als Erstes wird mit <style> gesagt, dass im Folgenden das Design mit CSS programmiert wird. 

Mit html wird das HTML-Element angesprochen und innerhalb der geschweiften Klammern seine Eigenschaften definiert. In diesem Fall, wie vorhin beschrieben, die Hintergrundfarbe „Lightblue„. Jede Zeile muss mit einem Semikolon abgeschlossen werden, da auch mehrere untergeordneten Eigenschaften zusammengefasst in einer Zeile definiert werden können und dem Computer damit gesagt werden muss, wann das Satzende ist.

Bei h1 und p ist es genau dasselbe Spiel. Zuerst muss das HTML-Element angesprochen werden und dann innerhalb der geschweiften Klammern definiert werden.

Das text-align definiert, ob der Text linksbündig/rechtsbündig oder mittig zentriert sein soll und das color die Schriftfarbe, alternativ könnte auch font-color geschrieben werden. 

Neben diesen einfachen definierten Punkten können sehr viel mehr definiert werden. Beispielsweise der innere und äußere Abstand mit padding und margin, eine Umrandung mit border und die Weite mit width.

CSS Einbindung in den HTML-Code

Der obige Code wird in dem HTML-Code eingebunden, indem du diesen nachdem <head></head> Bereich platzierst. Das sieht dann insgesamt so aus: 

<!DOCTYPE html>
<html>
 <head>
  <title>Meine Webseite</title>
 </head>
<style>
 html{
  background-color: lightblue;
 }
 h1{
  color: black;
  text-align: center;
 }
 p{
 color: red;
 text-align: center;
 }
</style>
 <body>
  <h1>Hallo Welt!</h1>
  <p>Das ist meine Webseite</p>
 </body>
</html>