CSS-Einführung


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


CSS ist die Sprache, die wir zum Gestalten einer Webseite verwenden.


Was ist CSS?

  • CSS steht für Cascading Style Sheets

  • CSS beschreibt, wie HTML-Elemente auf dem Bildschirm dargestellt werden sollen, auf Papier oder in anderen Medien

  • CSS erspart viel Arbeit. Es kann das Layout von steuern mehrere Webseiten gleichzeitig

  • Externe Stylesheets werden in CSS-Dateien gespeichert


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

Hier zeigen wir eine HTML-Seite mit vier verschiedenen Stylesheets. Klicken Sie auf „Stylesheet 1“, „Stylesheet 2“, „Stylesheet 3“, „Stylesheet 4“. Links unten, um die verschiedenen Stile zu sehen:



Warum CSS verwenden?

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

CSS-Beispiel

body
{
  background-color: lightblue;
}

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

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}

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

p {
  font-family: verdana;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>

</body>
</html>



CSS hat ein großes Problem gelöst

HTML sollte NIEMALS Tags zum Formatieren einer Webseite enthalten!

HTML war 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 und Farbattribute zum HTML 3.2 hinzugefügt wurden Spezifikation begann ein Albtraum für Webentwickler. Entwicklung großer Websites, auf denen jedem einzelnen Schriftarten und Farbinformationen hinzugefügt wurden Seite, 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!

Wenn Sie nicht wissen, was HTML ist, empfehlen wir Ihnen, unser HTML-Tutorial zu lesen.


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!