Einführung in CSS in HTML
CSS (Cascading Style Sheets) ermöglicht es uns, HTML-Webseiten zu gestalten und visuell aufzuwerten. HTML gibt die Struktur, CSS das Aussehen. Beide Sprachen arbeiten auf jeder Website Hand in Hand.
Was ist CSS?
CSS ist eine Gestaltungssprache zur Formatierung von HTML-Elementen. Damit kannst du Textfarbe, Größe, Abstände, Hintergründe, Positionierung und vieles mehr definieren. CSS trennt Inhalt von Design und erleichtert so die Wartung.
Inline-CSS
Inline-CSS wird direkt im HTML-Element mit dem style-Attribut geschrieben. Es ist schnell und einfach, aber für größere Projekte nicht empfohlen.
html
<p style="color: blue;">This text is blue.</p>Internes CSS
Internes CSS wird im <style>-Tag innerhalb des <head> der HTML-Datei platziert. Das ist nützlich, wenn nur eine bestimmte Seite individuelles Styling benötigt.
html
<style>
p {
font-size: 18px;
color: green;
}
</style>Externes CSS
Dies ist die gängigste Methode. CSS wird in eine separate Datei geschrieben und über ein <link>-Tag im <head> eingebunden. So kannst du das Styling der gesamten Website zentral verwalten.
html
<link rel="stylesheet" href="styles.css">Verwendung von Klassen und IDs
Das Attribut class kann bei mehreren Elementen verwendet werden. IDs sind einzigartig und sollten nur einmal vorkommen. In CSS beginnt eine Klasse mit einem Punkt (.) und eine ID mit einem Hash (#).
html
<p class="note">This is a note</p>
<p id="unique">This is a unique paragraph</p>css
.note {
color: orange;
}
#unique {
font-weight: bold;
}Grundlegende CSS-Syntax
Jede CSS-Regel beginnt mit einem Selektor (z. B. h1), gefolgt von geschweiften Klammern mit Eigenschaft-Wert-Paaren. Jede Zeile endet mit einem Semikolon.
css
selector {
property: value;
}Zusammenfassung
Ohne CSS wäre eine Webseite nur Text und Struktur. CSS liefert die visuelle Ebene, die Benutzer sehen. Die drei Hauptmethoden – inline, intern und extern – geben dir Flexibilität beim Styling. CSS früh zu lernen ist essenziell, denn es ist die Grundlage aller Webentwicklung.
Sprache wählen
Thema wählen
© 2025 ReadyTools. Alle Rechte vorbehalten.