CSS
CSS beschreibt, wie HTML-Elemente auf dem Bildschirm, auf Papier oder in anderen Medien angezeigt werden sollen.
CSS kann auf drei Arten zu HTML-Elementen hinzugefügt werden:
Inline - mithilfe des style-Attributs in HTML-Elementen
Intern - mithilfe eines <style> -Elements im Abschnitt <head>
Extern - mithilfe einer externen CSS-Datei
Die häufigste Methode zum Hinzufügen von CSS besteht darin, die Stile in separaten CSS-Dateien zu speichern. Hier verwenden wir jedoch Inline- und internes Styling, da dies einfacher zu demonstrieren ist und Sie es leichter selbst ausprobieren können.
Inline-CSS
Ein Inline-CSS wird verwendet, um einen eindeutigen Stil auf ein einzelnes HTML-Element anzuwenden.
Ein Inline-CSS verwendet das style-Attribut eines HTML-Elements.
In diesem Beispiel wird die Textfarbe des <h1> -Elements auf Blau gesetzt:
<h1 style="color:blue;">This is a Blue Heading</h1>
Internes CSS
Ein internes CSS wird verwendet, um einen Stil für eine einzelne HTML-Seite zu definieren.
Ein internes CSS wird im Abschnitt <head> einer HTML-Seite innerhalb eines <style> -Elements definiert:
Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading </h1>
<p> This is a paragraph. </p>
</body>
</html>
Externes CSS
Ein externes Stylesheet wird verwendet, um den Stil für viele HTML-Seiten zu definieren.
Mit einem externen Stylesheet können Sie das Aussehen einer gesamten Website ändern, indem Sie eine Datei ändern!
Um ein externes Stylesheet zu verwenden, fügen Sie im Abschnitt <head> der HTML-Seite einen Link hinzu
<!DOCTYPE html>
<html>
<head>
< <link rel="stylesheet" href="styles.css">
</head>
<body>
< <h1>This is a heading</h1>
< <p>This is a paragraph.</p>
</body>
</html>
Ein externes Stylesheet kann in einem beliebigen Texteditor geschrieben werden. Die Datei darf keinen HTML-Code enthalten und muss mit der Erweiterung .css gespeichert werden.
So sieht die "styles.css" aus:
body {
background-color: powderblue;
}
h1 {
color: green;
}
p {
color: red;
}