Inline-CSS-Handbuch - Direktes Stylen eines HTML-Tags

Sie haben HTML geschrieben und müssen es jetzt mit CSS formatieren. Eine Möglichkeit ist die Verwendung von Inline-Stilen, worum es in diesem Artikel geht.

This is my first paragraph.

Bevor wir uns mit den Nuancen von Inline-Stilen befassen - wann, warum und wie sie verwendet werden - ist es wichtig, die anderen Möglichkeiten zum Stylen Ihres HTML-Codes zu kennen. Auf diese Weise wählen Sie die beste Option für Ihren Code.

Hier ist eine Zusammenfassung Ihrer Optionen.

Externes Stylesheet

Entwickler speichern normalerweise ihr gesamtes CSS in einem externen Stylesheet. Verwenden Sie in Ihrer HTML-Datei das Element, um eine Verknüpfung zu Ihrem externen Stylesheet herzustellen, das Ihr CSS enthält.

In der Datei index.css haben wir unsere CSS-Regeln.

p { color: red; font-size: 20px; } 

Internes Stylesheet

Eine weitere Option zum Stylen von CSS ist die Verwendung eines internen Stylesheets. Dies bedeutet, dass Sie Ihre CSS-Regeln innerhalb des Elements in Ihrer HTML-Datei definieren.

  p { color: red; font-size: 20px; }   

Inline-Stile

Weniger häufig werden Sie nach Inline-Stilen greifen. Aber sie sind immer noch wichtig zu wissen, weil es bestimmte Gelegenheiten gibt, in denen sie sich als nützlich erweisen.

Bei Inline-Stilen fügen Sie den Stil hinzuAttribut zu einem HTML-Tag, gefolgt von Ihrem CSS, um ein Element zu formatieren.

This is my first paragraph.

This is my second paragraph.

In unserem Fall ist der Text des ersten Absatzes rot mit einer Schriftgröße von 20 Pixel. Der zweite bleibt jedoch unverändert.

Schauen wir uns genauer an, wie und wann Inline-Stile verwendet werden sollen. Wir werden auch herausfinden, warum nur einer unserer Absätze gestylt ist.

Was ist ein HTML-Tag?

Bei Inline-Stilen wenden Sie CSS auf das styleAttribut im öffnenden HTML-Tag an.

Beispiele für HTML-Tags sind:

  • ...
  • ...

  • ...

Das Öffnen und Schließen von Tags ist häufig Teil des HTML-Elements, das Text, Daten, ein Bild oder gar nichts enthalten kann.

Hier haben wir ein Textelement.

This is my first paragraph.

Wir können Inline-Stile verwenden, um dieses Element zu formatieren, indem wir das style-Attribut zum öffnenden Tag hinzufügen, gefolgt von CSS-Eigenschafts-Wert-Paaren.

This is my first paragraph.

This is my second paragraph.

Lassen Sie uns durchgehen, wie wir Inline-Stile verwendet haben.

Verwendung von Inline-Stilen

Ergänzen Sie diestyle-Attribut für das Tag, das Sie stylen möchten, gefolgt von einem Gleichheitszeichen. Beginnen und beenden Sie Ihr CSS mit doppelten Anführungszeichen.

Fügen Sie dem Stilattribut Eigenschafts-Wert-Paare hinzu. Fügen Sie nach jedem Eigenschafts-Wert-Paar ein Semikolon hinzu.

color: red; font-size: 20px; 

Wenn wir also alles zusammenfügen, sieht es so aus:

This is my first paragraph.

Wichtige Punkte zu wissen

Im Gegensatz zu internen und externen Stylesheets enthalten Inline-Styles keine geschweiften Klammern oder Zeilenumbrüche. Das heißt, schreiben Sie Ihr CSS alle in dieselbe Zeile, wenn Sie Inline-Stile verwenden.

Beachten Sie außerdem, dass Inline-Stile nur das spezifische Element betreffen, zu dem Sie das Stilattribut mit CSS-Eigenschafts-Wert-Paaren hinzufügen.

Im folgenden Code wird beispielsweise nur der erste Absatz mit einer Schriftgröße von 20 Pixel rot gestaltet.

This is my first paragraph.

This is my second paragraph.

Wenn wir den Text beider Absätze mit Inline-Stilen formatieren möchten, müssen wir dem zweiten Stilattribut CSS hinzufügen

This is my first paragraph.

This is my second paragraph.

However, if we used an external stylesheet, for example, we could easily style both paragraphs without duplicating our code by using a single CSS selector.

p { color: red; font-size: 20px; } 

This brings us to an important topic: when to use and when not to use inline styles.

When to Use (and when NOT to use) Inline Styles

Say you have an HTML file with ten or more paragraph tags. Can you imagine styling each one individually with inline styles?

Doing so will quickly clutter your code, making it hard to read and maintain.

Besides, inline styles can introduce specificity issues if you’re also using internal or external stylesheets.

That’s because inline styles have a high specificity. This means they'll override most other rules in internal and external stylesheets, except for the !important declaration.

For example, we added inline styles to two paragraph elements. We’ve also added an internal stylesheet.

  My New Webpage  p { color: pink; }    

A blue paragraph.

Another blue paragraph.

The CSS from our inline styles override the CSS in the internal stylesheet. So we end up with two blue paragraphs.

External stylesheets are also much easier to maintain when you or someone else needs to make a change. This is because a style from an external or internal stylesheet can apply to multiple elements, while an inline one must be applied to each element individually.

For example, say you need to update a style to ten elements. It’s easier to make the change once in an external stylesheet, instead of ten different times in your HTML file.

In general, it’s often best practice to put your CSS into a separate file. That way, your HTML file contains the structure and content of your website, and your CSS file contains your styles. Doing so makes your code easier to read and manage.

However, there are times when it may make sense to use inline styles:

  • Add a style and see the change quickly, which can be useful for testing.
  • Use the style attribute in JavaScript to apply styling.

Most of the time you’ll want to use external stylesheets. But you’ll occasionally find yourself using inline styles, most commonly in the above situations.

I write about learning to program, and the best ways to go about it on my blog at amymhaddad.com.

Original text