EMZETT.
Login

Emzett Wiki

HTML + CSS: CSS: Grundlagen

Properties1
tagsprogrammiersprachen, html-css

4 Min. Lesezeit

Kurz: CSS (Cascading Style Sheets) legt das Aussehen von HTML fest. Du schreibst Regeln:

Teil des Kurses HTML + CSS

Kapitel 13 von 27 im Kurs HTML + CSS (Abschnitt „CSS: Gestaltung“). Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

CSS (Cascading Style Sheets) legt das Aussehen von HTML fest. Du schreibst Regeln:

selektor {
  eigenschaft: wert;
  eigenschaft: wert;
}
<style>
  h1 {
    color: darkblue;
    text-align: center;
  }
  p {
    font-size: 18px;
    line-height: 1.5;
  }
</style>
<h1>Eine Überschrift</h1>
<p>Ein Absatz mit größerer Schrift und mehr Zeilenabstand.</p>
  • Der Selektor wählt Elemente aus
  • Eine Deklaration besteht aus Eigenschaft, Doppelpunkt, Wert und Semikolon
  • Kommentare: /* Das ist ein Kommentar */

CSS einbinden

WegBeispielWann
Externe Datei<link rel="stylesheet" href="stil.css">Standard, wiederverwendbar, wird gecacht
Interner Block<style> ... </style> im <head>kleine Seiten, Tests
Inline<p style="color: red">nur für Ausnahmen, z. B. dynamische Werte

Mehrere Dateien kannst du mit @import "datei.css"; laden (besser: mehrere <link>-Tags oder einen Bundler).

Die Kaskade: Warum “Cascading”?

Mehrere Regeln können auf dasselbe Element passen. Der Browser entscheidet nach drei Dingen:

  1. Wichtigkeit (!important schlägt normale Regeln, nur im Notfall nutzen)
  2. Spezifität: genauere Selektoren gewinnen (#id > .klasse > element)
  3. Reihenfolge: bei gleichem Gewicht gewinnt die spätere Regel
<style>
  p { color: gray; }
  p.hinweis { color: orange; }
  #wichtig { color: crimson; }
  p { color: green; }          /* gleich spezifisch wie die erste, aber später: gewinnt gegen "gray" */
</style>
<p>Ein normaler Absatz (grün)</p>
<p class="hinweis">Ein Hinweis (orange)</p>
<p class="hinweis" id="wichtig">Ein wichtiger Hinweis (rot)</p>

Vererbung

Manche Eigenschaften werden von Eltern an Kinder vererbt, vor allem Text-Eigenschaften (color, font-family, font-size, line-height, text-align). Layout-Eigenschaften (margin, padding, border, background) werden nicht vererbt.

<style>
  article { color: navy; font-family: Georgia, serif; border: 2px solid navy; padding: 8px; }
</style>
<article>
  <h2>Titel</h2>
  <p>Text und Überschrift erben Farbe und Schrift, aber nicht den Rahmen.</p>
</article>

Mit inherit, initial und unset steuerst du das ausdrücklich:

<style>
  .box { border: 2px solid teal; padding: 6px; }
  .box a { color: inherit; }             /* Linkfarbe vom Elternelement übernehmen */
</style>
<div class="box" style="color: crimson">Rot mit <a href="#">erbendem Link</a></div>

Einheiten

EinheitBedeutungTypisch für
pxBildschirmpunktRahmen, feine Abstände
%Prozent des ElternelementsBreiten
remVielfaches der Schriftgröße des html-Elements (meist 16 px)Schrift, Abstände (empfohlen)
emVielfaches der Schriftgröße des aktuellen ElementsAbstände relativ zum Text
vw, vh1 % der Fensterbreite/-höheVollbild-Abschnitte
chBreite der “0”Zeilenlänge (max-width: 65ch)
frAnteil am Platz (Grid)Spalten
deg, s, msGrad, ZeitRotation, Animation

Nutze rem für Schriftgrößen, damit die Einstellung der Nutzerin (Schrift vergrößern) wirkt.

Selektoren-Vorschau

<style>
  p { color: #333; }                 /* alle p */
  .rot { color: crimson; }           /* Klasse */
  #titel { font-size: 2rem; }        /* ID */
  ul li { margin: 4px 0; }           /* li in ul */
  h2, h3 { color: teal; }            /* mehrere */
</style>
<h2 id="titel">Titel mit ID</h2>
<p class="rot">Roter Absatz</p>
<ul><li>Eins</li><li>Zwei</li></ul>

Mehr dazu im nächsten Kapitel.

Werte kurz schreiben (Shorthands)

<style>
  .a { margin: 10px 20px 30px 40px; }   /* oben rechts unten links (im Uhrzeigersinn) */
  .b { padding: 10px 20px; }            /* oben/unten  links/rechts */
  .c { border: 2px dashed crimson; }    /* Breite Stil Farbe */
  .d { font: italic bold 1.2rem/1.4 Georgia, serif; }
  .e { background: #eef url() no-repeat; }
  div { background: #f1f5f9; margin-bottom: 8px; }
</style>
<div class="a">Margin: vier Werte</div>
<div class="b">Padding: zwei Werte</div>
<div class="c">Border: Kurzschreibweise</div>
<div class="d">Font: Kurzschreibweise</div>

Fehler finden

Öffne die Entwicklerwerkzeuge (F12) und wähle ein Element aus. Rechts siehst du alle Regeln, die gelten. Durchgestrichene Regeln wurden von anderen überschrieben, gelbe Warnzeichen zeigen ungültige Werte. Du kannst Werte live ändern.

Merke

  • Regel = Selektor + Deklarationen (eigenschaft: wert;)
  • CSS am besten in einer externen Datei
  • Kaskade: Wichtigkeit, Spezifität, Reihenfolge
  • Text-Eigenschaften werden vererbt, Layout-Eigenschaften nicht
  • rem für Schrift und Abstände, %/fr/vw für Layout
  • Shorthand-Eigenschaften wie margin, padding, border, font fassen mehrere Werte zusammen

Übungsaufgabe

Gestalte eine Seite mit Überschrift, drei Absätzen und einer Liste: eigene Farben, Schriftgröße in rem, mehr Zeilenabstand und einen Rahmen um die Liste.

Quiz zur Selbstkontrolle

Weiter im Kurs

Zurück: Barrierefreies HTML

Weiter: Selektoren

Alle Kapitel: HTML + CSS im Überblick

Graphansicht

Backlinks