Benutzer-Werkzeuge

Webseiten-Werkzeuge


it-themen:webdesign:css:grundlagen

**Dies ist eine alte Version des Dokuments!**

zurück

CSS – Grundlagen

CSS (Cascading Style Sheets) beschreibt die Darstellung von HTML-Inhalten.

CSS legt fest:

  • Farben
  • Schriftarten
  • Abstände
  • Layout
  • Responsives Verhalten

HTML beschreibt was etwas ist,
CSS beschreibt wie es aussieht.


Einbindung von CSS

Es gibt drei Möglichkeiten, CSS einzubinden.

Methode Beschreibung
extern separate CSS-Datei
intern <style> im <head>
inline direkt im HTML-Element

Externes CSS (empfohlen)

<link rel="stylesheet" href="style.css">

Vorteile:

  • saubere Trennung von Inhalt und Design
  • wiederverwendbar
  • wartbar

Internes CSS

<style>
  body {
    background-color: white;
  }
</style>

Geeignet für:

  • kleine Tests
  • Einzelseiten

Inline-CSS

<p style="color:red;">Text</p>

⚠️ Nicht empfohlen:

  • schwer wartbar
  • überschreibt andere Regeln

CSS-Syntax

selektor {
  eigenschaft: wert;
}

Beispiel:

p {
  color: black;
  font-size: 16px;
}

Selektoren (Grundlagen)

Selektor Bedeutung
p Element
.klasse Klasse
#id ID
* alle Elemente
it-themen/webdesign/css/grundlagen.1766795134.txt.gz · Zuletzt geändert: von lars