Devenia Lernen / Wörterbuch
CSS-Styling verstehen
CSS legt fest, wie HTML-Inhalte aussehen: Typografie, Farben, Abstände, Layout und responsives Verhalten. Dieser Leitfaden zeigt, was Styling ändern kann – und was es nicht löst.
Beginnen Sie mit einer E-Mail. Senden Sie uns die Seite oder Ihre Frage, und wir antworten verständlich.
CSS als Präsentationsebene einsetzen.
Auf einer Cafékarte kennzeichnet HTML die Überschrift, die Gerichte und die Preise. CSS legt Schrift, Abstände und Ausrichtung fest. Auf einem breiten Bildschirm kann CSS zwei Menüspalten nebeneinander platzieren und sie auf einem Smartphone untereinander anordnen, während Gerichte und Preise gleich bleiben.
Was Styling ändern kann
Eine größere Überschrift kann keine fehlende Öffnungszeit ersetzen oder ein unklareres Angebot erklären. Formulieren Sie zuerst die Worte klar und nutzen Sie dann Styling, damit sie leicht zu finden sind. Ein erstes Codebeispiel finden Sie in MDNs Einführung in CSS.
Warum ein Stil einen anderen überschreibt
Mehrere Regeln können auf dasselbe Element zutreffen. Die Kaskade bestimmt, welchen Wert der Browser bei einem Konflikt verwendet. Zum Beispiel können sowohl eine seitenweite Linkfarbe als auch eine eigene Farbe für Navigationslinks auf einen Menülink zutreffen.
Wenn eine Farbänderung keine sichtbare Wirkung hat, untersuchen Sie das Element in den Entwicklertools des Browsers. Das Styles-Panel zeigt passende Regeln und durchgestrichene Deklarationen. Prüfen Sie, welche Regel gewinnt, bevor Sie eine weitere Überschreibung hinzufügen.
Prüfen, ob Menschen die Seite nutzen können
Testen Sie die Seite nach einer Stylingänderung mit echten Inhalten. Lange Überschriften, Menüs und Preise können Probleme sichtbar machen, die kurzer Platzhaltertext verbirgt.
Gutes Styling hilft Besuchern beim Lesen und Handeln. Es garantiert keine besseren Suchrankings. Googles Leitfaden zur Seitenerfahrung macht deutlich, dass eine gute Erfahrung allein keine Top-Position garantiert.
CSS: Häufige Fragen
Zurück zum Wörterbuch.
Wofür steht CSS?
CSS steht für Cascading Style Sheets. Es legt fest, wie HTML-Elemente aussehen: Typografie, Farben, Abstände und Layout.
Was ist der Unterschied zwischen HTML und CSS?
HTML liefert Struktur und Bedeutung, zum Beispiel Überschriften, Absätze und Listen. CSS liefert die Darstellung: wie diese Elemente aussehen.
Muss ich CSS lernen, um eine Website zu bauen?
Nein. Ein Theme oder visueller Editor kann Steuerelemente für Farben, Typografie und Layout anbieten. Nutzen Sie diese zuerst, damit zusammengehörige Seiten einheitlich bleiben. Lernen Sie CSS, wenn Sie eine Darstellungsregel verstehen oder ändern müssen, die diese Steuerelemente nicht abdecken.
Was ist responsives Design?
Responsives Design bedeutet, dass sich eine Website an verschiedene Bildschirmgrößen anpasst. CSS verändert Layout und Abstände für Smartphones, Tablets und Desktops.
Beeinflusst CSS die SEO?
CSS kann beeinflussen, wie eine Seite dargestellt und geladen wird. Farben oder Abstände zu ändern verbessert die Rankings jedoch nicht automatisch. Halten Sie nützliche Inhalte zugänglich und prüfen Sie mobiles Layout und Ladeverhalten, wenn Sie Styles ändern.
Haben Sie eine praktische Frage zu CSS?
Senden Sie die Seitenadresse, das Element, das falsch aussieht, und die Bildschirmgröße, bei der Sie den Fehler sehen. Schreiben Sie auch, was Sie erwartet haben. So können wir die nötige Stylingänderung bestimmen.