Entdecke, was CSS ist, wie du es mit einer HTML-Seite verbindest und wie du deine allererste Regel schreibst.
Diese Lektion in Kodokon öffnenHTML beschreibt den Inhalt einer Webseite: die Überschriften, die Absätze, die Bilder. CSS (kurz für Cascading Style Sheets) beschreibt ihr Aussehen: die Farben, die Größen, die Abstände. Stell dir ein Haus vor: HTML ist das Mauerwerk und die Räume; CSS ist die Farbe, die Möbel und die Deko. Ohne CSS würde jede Webseite gleich aussehen: schwarzer Text auf weißem Hintergrund.
Eine CSS-Regel besteht aus drei Teilen. Zuerst kommt ein Selektor: Er sagt, welche Elemente auf der Seite betroffen sind (zum Beispiel alle Absätze). Dann kommen zwischen geschweiften Klammern { } eine oder mehrere Deklarationen. Jede Deklaration verbindet eine Eigenschaft (was du ändern möchtest, etwa die Farbe) mit einem Wert (die Wahl, die du triffst, etwa Rot), getrennt durch einen Doppelpunkt : und beendet mit einem Semikolon ;.
p {
color: red;
font-size: 18px;
}Lies diese Regel Wort für Wort. p ist der Selektor: Er zielt auf jedes <p>-Element auf der Seite, also auf die Absätze. color ist eine Eigenschaft, die die Textfarbe festlegt, und red ist ihr Wert. font-size legt die Textgröße fest, hier 18px (18 Pixel, die Einheit zum Messen von Bildschirmen). Es gibt drei Wege, dieses CSS mit einer HTML-Seite zu verbinden. Die empfohlene Methode ist die externe Datei: Das CSS lebt in seiner eigenen Datei, zum Beispiel styles.css, die du mit einem <link>-Tag im <head> in die HTML einbindest.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This text will be red.</p>
</body>
</html>Zweite Methode: internes CSS. Du schreibst die Regeln direkt in die HTML, in ein <style>-Tag im <head>. Das ist praktisch für einen schnellen Test, aber die Stile gelten nur für diese eine Seite. Dritte Methode: Inline-CSS. Du schreibst die Deklarationen direkt an ein Tag, in ein style-Attribut. Beachte, dass es keinen Selektor und keine geschweiften Klammern gibt, da der Stil nur für dieses eine Tag gilt.
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p style="color: blue;">I am blue.</p>
<p>I am red.</p>
</body>color in der Regel p { color: red; }?