Hier ist ein Thema, das wir uns zusammen mit einem Werkzeug ansehen, das jedem im Webdesign dient. Mit dem Werkzeug in diesem Beitrag sehen Sie jede Auflistung von Inline-CSS auf einer Seite, samt Attributen. Wenn beim Blick auf die Ladegeschwindigkeit immer wieder Inline-CSS auftaucht, zeigt Ihnen dieses Werkzeug von Türk SEM Ihre Probleme vollständig.
Inline CSS wird auch Inline-Styling genannt.
Test auf Renderblockierung
Sehen Sie diesen Wert für Ihre eigene Website sofort: Adresse eintragen, und Ihr Ergebnis für Test auf Renderblockierung erscheint hier, dazu Erkenntnisse speziell zu diesem Werkzeug.
Kostenlos, ohne Anmeldung; mit der Prüfung richten sich zudem alle unsere Werkzeuge auf Ihre Website aus.
Geben Sie oben die Seite ein, die Sie ansehen möchten, und starten Sie die Prüfung. Während der Prüfungen begegnet Ihnen eine Anleitung, die erklärt, was das inline geschriebene CSS tatsächlich tut.
Inline-CSS ist eine Methode der Gestaltung, bei der Sie CSS-Regeln über das style-Attribut unmittelbar auf ein HTML-Element anwenden. Der Ansatz erlaubt Ihnen, CSS direkt in Ihr HTML zu schreiben, und wirkt nur auf das eine Element, an dem er steht; damit ist er eine Methode für genau diese Stelle.
Inline-Stile sind ein schneller, praktischer Weg, das Aussehen von Elementen auf Ihrer HTML-Seite zu ändern, ohne ein externes Stylesheet (.css) einzubinden oder aus internen Stylesheets im Head-Bereich zu schöpfen.
Die Schreibweise für Inline-CSS ist einfach zu handhaben. Sie beginnen mit dem style-Attribut in einem HTML-Tag, dann folgt ein Gleichheitszeichen. Der Wert des style-Attributs wird anschließend als eine Reihe von CSS-Paaren aus Eigenschaft und Wert in Anführungszeichen geschrieben.
Jede Eigenschaft wird von ihrem Wert durch einen Doppelpunkt getrennt, und jedes Paar aus Eigenschaft und Wert durch ein Semikolon.
Das style-Attribut ist das HTML-Attribut, mit dem Sie CSS unmittelbar in Ihr HTML schreiben. Es ist das Tor zum Inline-Styling und wird von jedem HTML-Element und jedem Browser unterstützt. Wenn Sie das style-Attribut an ein HTML-Tag setzen, sagt es dem Browser, die genannten Stile allein auf dieses Element anzuwenden.
Im style-Attribut können Sie beliebig viele CSS-Paare aus Eigenschaft und Wert angeben. Eine CSS-Eigenschaft umfasst jeden Aspekt eines Elements, den Sie gestalten möchten, etwa Farbe, Rahmen oder Außenabstand. Der Wert ist das, was Sie für diese Eigenschaft an dieser einen Stelle setzen: rot, 2 Pixel durchgezogen schwarz oder 10 Pixel.
Hier ein Beispiel, wie Sie mit Inline-CSS Textfarbe und Schriftgröße eines Absatzes ändern können:
<!-- BEISPIELCODE INLINE-CSS -->
<p style="color: red; font-size: 20px;">Dieser Inhalt ist Beispielcode von Turksem.com zur Erklärung von Inline-CSS.</p>Sehen wir uns nun eine Vorschau dieses Codes an.
Dieser Inhalt ist Beispielcode von Turksem.com zur Erklärung von Inline-CSS.
| Aspekt | Inline-CSS | Externe style.css |
|---|---|---|
| Definition | Wird unmittelbar im Attribut “style” eines HTML-Elements angegeben | Wird in einer eigenen .css-Datei angegeben |
| Vorrang | Hat den höchsten Vorrang | Hat geringeren Vorrang als Inline-CSS |
| Wiederverwendbarkeit | Gering, muss für jedes Element erneut geschrieben werden | Hoch, lässt sich über viele Seiten nutzen |
| Pflege | Schwer, Änderungen müssen an jedem Element einzeln erfolgen | Leicht, Sie ändern eine Datei |
| Ladegeschwindigkeit | Lässt die Seite wachsen und kann sie bremsen | Als eigene Datei zwischenspeicherbar, was die Geschwindigkeit hebt |
| Lesbarkeit des Codes | Macht den HTML-Inhalt unübersichtlich | Trennt HTML und CSS, was die Lesbarkeit verbessert |
| Übertragbarkeit | Gering, an jede HTML-Datei gebunden | Hoch, in verschiedenen HTML-Dateien nutzbar |
| Skalierbarkeit | Gering, in großen Projekten schwer zu verwalten | Hoch, in großen Projekten leichter zu verwalten |
Inline-CSS, das wir oft verwenden, weil es der bequeme Weg ist, ist eine überholte Praxis und bremst Ihre Website tendenziell. Nehmen wir an, Sie möchten Ihre Überschriften in 20px und rot. Hat die Seite 10 Überschriften, setzen Sie denselben Code an jede einzelne. Das erzeugt einen unnötigen Haufen Code. Geben Sie den Stil für .h1 stattdessen in einer externen .css-Datei an, und Sie haben diese Dichte deutlich gesenkt.
Das Prüfwerkzeug oben gibt Ihnen eine gründliche Anleitung. Prüfen Sie die betreffenden Seiten und sehen Sie sich den Code an, den Sie immer wieder wiederholen.
Im Bereich Werkzeuge zum Prüfen von Websites veröffentlichen wir viele wirksame Werkzeuge für Webmaster.
Als SEO-Agentur gilt unser Blick meist der Geschwindigkeit; vergessen Sie aber nicht, dass Sie uns zu Ihren Schwierigkeiten mit Inline-CSS schreiben und eine zweite Meinung einholen können.
Autor
Tahir Dinç
SEO-Fachmann · Gründer von Türk SEM
Ich habe 1999 mit dieser Arbeit begonnen und wurde 2004 Redakteur beim ODP. Heute betreue ich sehr viele große Unternehmen mit SEO und Google Ads. Zugleich führe ich als Vorsitzender der Türk SEM Group die Unternehmen innerhalb der Gruppe.
Profil ansehen →
