03586 – 3684921
support@seo-lausitz.de
In diesem Tutorial erfahren Sie, wie einfach es ist, den Webseiten mithilfe von CSS Stil- und Formatierungsinformationen hinzuzufügen. Bevor wir jedoch beginnen, stellen Sie sicher, dass Sie über Grundkentnisse im HTML verfügen.
CSS kann entweder als separates Dokument angehängt oder in das HTML-Dokument selbst eingebettet werden. Es gibt drei Methoden zum Einbinden von CSS in ein HTML-Dokument:
style-Attributs im HTML-Element.<style>-Elements im Kopfbereich. <link>-Elements welches auf eine externe CSS-Datei verweist. In diesem Tutorial werden wir alle diese drei Methoden zum Einfügen von CSS nacheinander behandeln.
Hinweis: Die Inline-Styles haben die höchste Priorität, die externen Stylesheets die niedrigste. Das bedeutet, wenn Sie Stile für ein Element sowohl in eingebetteten als auch in externen Stylesheets angeben, würden die widersprüchlichen Stilregeln im eingebetteten Stylesheet das externe Stylesheet überschreiben.
Inline-Style wird verwendet, um die Stilregeln auf ein bestimmtes Element anzuwenden, indem die CSS-Regeln direkt in das Start-Tag eingefügt wird. Es kann über das style-Attribut an ein Element angehängt werden.
Das style-Attribut enthält eine Reihe von CSS-Eigenschafts- und Wertpaaren. Jedes "Eigenschaft:Wert"-Paar wird durch ein Semikolon (;) getrennt. Es sollte dabei alles in einer Zeile stehen. Die Verwendung von Zeilenumbrüchen in Inline-Styles ist nicht erlaubt.
Beispiel:
<h1 style="color:red; font-size:30px;">CSS lernen Überschrift</h1>
<p style="color:green; font-size:22px;">CSS lernen Paragraph.</p>
<div style="color:blue; font-size:14px;">CSS lernen Text.</div>
Die Verwendung von Inline-Style wird im Allgemeinen als schlechte Praxis angesehen, da Stilregeln direkt in das HTML-Tag eingebettet sind. Hierdurch wird die Präsentation mit dem Inhalt des Dokuments vermischt, was die Pflege des Codes erschwert und den Zweck der Verwendung von CSS so ziemlich zunichte macht.
Hinweis: Es ist nicht möglich, Pseudo-Elemente und Pseudo-Klassen mit Inline-Style zu formatieren. Vermeiden Sie daher die Verwendung von Style-Attributen in Ihrem Code. Die Verwendung externer Stylesheets ist die bevorzugte Methode, um HTML-Dokumenten mit einem Design auszustatten.
Eingebettete oder interne Stylesheets wirken sich nur auf das Dokument aus, in das sie eingebettet sind.
Eingebettete Stylesheets werden im <head>-Abschnitt eines HTML-Dokuments mit dem <style>-Element definiert.
Beispiel:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS lernen</title>
<style>
body { background-color: blue; }
p { color: #fff; }
</style>
</head>
<body>
<h1>CSS lernen Überschrift</h1>
<p>CSS lernen Paragraph.</p>
</body>
</html>
Tipp: Das type-Attribut des <style> und des <link>-Tags (dh type="text/css") definiert die Sprache des Stylesheets. Dieses Attribut ist nur noch rein informativ. Sie können dies weglassen, da CSS die Standard-Stylesheet-Sprache in HTML5 ist.
Externe Stylesheets sind ideal, wenn Stildefinitionen auf viele Seiten der Website angewendet werden.
Ein externes Stylesheet enthält alle Stilregeln in einem separaten Dokument (also eine .css-Datei), das Sie aus jeder HTML-Datei auf Ihrer Site verlinken können. Externe Stylesheets sind am flexibelsten, da Sie mit einem externen Stylesheet das Aussehen einer gesamten Website ändern können, indem Sie nur eine Datei ändern.
Sie können externe Stylesheets auf zwei Arten anhängen – durch Verknüpfung und Importieren.
Vor dem Verknüpfen müssen wir zuerst ein Stylesheet erstellen. Gehen Sie dazu in Ihren bevorzugten Code-Editor und erstellen Sie dort eine neue Datei. Geben Sie nun den folgenden CSS-Code in diese Datei ein und speichern Sie ihn als "style.css".
body {
background: lightyellow;
font: 18px Arial, sans-serif;
}
h1 {
color: orange;
}
Über den <link>-Tag kann ein externes Stylesheet mit einem HTML-Dokument verknüpft werden.
Den <link>-Tag wird in den <head>-Bereich eingefügt, wie Sie im folgenden Beispiel sehen können:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS lernen</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>CSS lernen Überschrift</h1>
<p>CSS lernen Paragraph.</p>
</body>
</html>
Tipp: Von allen drei Methoden ist die Verwendung eines externen Stylesheets die beste Methode zum Definieren und Anwenden von Styles in HTML-Dokumenten. Wie Sie bei der Nutzung von externen Stylesheets deutlich sehen können, erfordert die betroffene HTML-Datei nur minimale Änderungen im Code.
Die @import-Regel ist eine weitere Möglichkeit, ein externes Stylesheet zu laden. Die @import-Anweisung fordert also den Browser auf, ein externes Stylesheet zu laden und seine Styles zu verwenden.
Sie können den Import auf zwei Arten verwenden. Das einfachste ist es, in der Kopfzeile Ihres Dokuments einen entsprechenden Eintrag zu setzen. Beachten Sie dabei, dass das <style>-Element möglicherweise noch andere CSS-Regeln enthält.
Hier ist ein Beispiel:
<style>
@import url("css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>
Ebenso können Sie die @import-Regel verwenden, um ein Stylesheet in ein anderes Stylesheet zu importieren.
@import url("css/layout.css");
@import url("css/color.css");
body {
color: blue;
font-size: 14px;
}
Hinweis: Alle @import-Regeln müssen am Anfang des Stylesheets stehen. Jede im Stylesheet selbst definierte Stilregel überschreibt die widersprüchlichen Regeln in den importierten Stylesheets. Das Importieren eines Stylesheets in ein anderes Stylesheet wird aufgrund von Leistungsproblemen nicht empfohlen. Um die Anzahl der geladenen Ressouren pro Seitenaufruf so gering wie möglich zu halten, sollten alle Styleanweisung möglichst in einer einzelnen Datei stehen.