CSS Erstellen

Wenn ein Stylesheet gelesen wird, formatiert der Browser das HTML-Dokument entsprechend.

Wie man ein Stylesheet einfügt

Es gibt drei Möglichkeiten, ein Stylesheet einzufügen:

• Externes Stylesheet
• Internes Stylesheet
• Inline-Style

Externes Stylesheet

Wenn Styles auf viele Seiten angewendet werden sollen, ist ein externes Stylesheet die ideale Wahl. Mit einem externen Stylesheet können Sie das Aussehen einer gesamten Website ändern, indem Sie eine Datei ändern. Jede Seite verlinkt das Stylesheet mit einem <link>-Tag. Der <link>-Tag gehört in den head (des Dokuments):

Der Browser liest die Stildeklarationen aus der Datei mystyle.css und formatiert das Dokument entsprechend.

Ein externes Stylesheet kann in jedem Texteditor bearbeitet werden. Die Datei darf keine HTML-Tags enthalten. Das Stylesheet sollte mit der Erweiterung .css gespeichert werden. Hier ist ein Beispiel für eine Stylesheet-Datei:

Lassen Sie kein Leerzeichen zwischen dem Eigenschaftswert und der Einheit (z. B. "margin-left: 20 px"); die korrekte Schreibweise ist "margin-left: 20px".

internes Stylesheet

Wenn ein einzelnes Dokument spezielle Stile benötigt, sollte ein internes Stylesheet verwendet werden. Sie können ein internes Stylesheet im head-Bereich des Dokuments mit einem <style>-Tag definieren, wie hier:

Inline-Stil

Da sie Darstellung und Inhalt vermischen, verlieren Inline-Stile viele der Vorteile von Stylesheets. Verwenden Sie diese Methode sparsam, z. B. wenn ein Stil nur einmal auf ein einzelnes Element angewendet werden muss.

Um Inline-Stile zu verwenden, müssen Sie das style-Attribut innerhalb des betreffenden Tags verwenden. Das style-Attribut kann jede CSS-Eigenschaft enthalten. Dieses Beispiel zeigt, wie Sie die Farbe und den linken Rand eines Absatzes ändern:

mehrere Stile

Wenn bestimmte Eigenschaften durch denselben Selektor in verschiedenen Stylesheets definiert werden, werden die Eigenschaftswerte aus dem spezifischeren Stylesheet übernommen.

Zum Beispiel hat das externe Stylesheet drei Eigenschaften für den h3-Selektor:

Und das interne Stylesheet hat zwei Eigenschaften für den h3-Selektor:

Wenn die Seite mit dem internen Stylesheet auch mit dem externen Stylesheet verlinkt ist, dann ist der Stil, den h3 erhält:

Das heißt, die Eigenschaft color wird aus dem externen Stylesheet übernommen, während text-alignment und font-size durch die Regeln im internen Stylesheet ersetzt werden.

Priorität mehrerer Styles

Stylesheets ermöglichen es, Stilinformationen auf viele Weise anzugeben. Stile können in einem einzelnen HTML-Element, im head-Element einer HTML-Seite oder in einer externen CSS-Datei angegeben werden. Sie können sogar mehrere externe Stylesheets innerhalb desselben HTML-Dokuments referenzieren.

Im Allgemeinen ist die Priorität wie folgt:

Inline-Stil > Internes Stylesheet > Externes Stylesheet > Browser-Standardstile

style.cssDer Stilcode der Datei lautet wie folgt:

h3 {
    color:blue;
}

Hinweis:Wenn der externe Stil nach dem internen Stil platziert wird, überschreibt der externe Stil den internen Stil, wie im folgenden Beispiel gezeigt: