CSS Einführung

CSS ist eines der wichtigsten Werkzeuge, um das Erscheinungsbild einer Website zu gestalten und zu verschönern. Wir bringen Ihnen die Grundlagen und den Umgang mit CSS bei

CSS kann den HTML-Schönheitsstil ändern

CSS ist die Sprache, die wir verwenden, um eine Webseite zu gestalten.

Was ist CSS?

CSS steht für Cascading Style Sheets
CSS beschreibt, wie HTML-Elemente auf dem Bildschirm, Papier oder in anderen Medien angezeigt werden sollen
CSS spart viel Arbeit. Es kann das Layout mehrerer Webseiten gleichzeitig steuern
Externe Stylesheets werden in CSS-Dateien gespeichert

CSS-Demo - Eine HTML-Seite - Mehrere Stile!

Hier zeigen wir eine HTML-Seite, die mit vier verschiedenen Stylesheets angezeigt wird. Klicken Sie unten auf die Links "Stylesheet 1", "Stylesheet 2", "Stylesheet 3", "Stylesheet 4", um die verschiedenen Stile anzuzeigen:

Warum CSS verwenden?

CSS wird verwendet, um Stile für Ihre Webseiten zu definieren, einschließlich Design, Layout und Variationen in der Anzeige für verschiedene Geräte und Bildschirmgrößen.

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

CSS hat ein großes Problem gelöst

HTML sollte NIEMALS Tags zum Formatieren einer Webseite enthalten!

HTML wurde erstellt, um den Inhalt einer Webseite zu beschreiben, wie zum Beispiel:

<h1>Dies ist eine Überschrift</h1>

<p>Dies ist ein Absatz.</p>

Als Tags wie <font> und Farbattribute zur HTML 3.2-Spezifikation hinzugefügt wurden, begann ein Alptraum für Webentwickler. Die Entwicklung großer Websites, bei denen Schriftarten und Farbinformationen zu jeder einzelnen Seite hinzugefügt wurden, wurde zu einem langen und teuren Prozess.

Um dieses Problem zu lösen, hat das World Wide Web Consortium (W3C) CSS entwickelt.

CSS hat die Stilformatierung von der HTML-Seite entfernt!

CSS spart viel Arbeit!

Die Stildefinitionen werden normalerweise in externen .css-Dateien gespeichert.

Mit einer externen Stylesheet-Datei können Sie das Aussehen einer gesamten Website ändern, indem Sie nur eine Datei ändern!

CSS-Syntax

Eine CSS-Regel besteht aus einem Selektor und einem Deklarationsblock.
CSS-Einführung

Der Selektor zeigt auf das HTML-Element, das Sie formatieren möchten.

Der Deklarationsblock enthält eine oder mehrere durch Semikolon getrennte Deklarationen.

Jede Deklaration enthält einen CSS-Eigenschaftsnamen und einen Wert, getrennt durch einen Doppelpunkt.

Mehrere CSS-Deklarationen werden durch Semikolons getrennt und Deklarationsblöcke werden von geschweiften Klammern umgeben.

p {
  color: red;
  text-align: center;
}

Beispiel erklärt

p ist ein Selektor in CSS (er zeigt auf das HTML-Element, das Sie formatieren möchten: <p>).
color ist eine Eigenschaft und red ist der Eigenschaftswert
text-align ist eine Eigenschaft und center ist der Eigenschaftswert