Guide CSS en ligne - Comment styliser une balise HTML directement

Vous avez écrit du HTML et devez maintenant le styliser avec CSS. Une façon consiste à utiliser des styles en ligne, c'est le sujet de cet article.

This is my first paragraph.

Avant de plonger dans les nuances des styles en ligne - quand, pourquoi et comment les utiliser - il est important de connaître les autres façons de styliser votre HTML. De cette façon, vous choisissez la meilleure option pour votre code.

Voici un résumé de vos options.

Feuille de style externe

Les développeurs conservent généralement tous leurs CSS dans une feuille de style externe. Dans votre fichier HTML, utilisez l' élément pour créer un lien vers votre feuille de style externe, qui contient votre CSS.

Dans le fichier, index.css, nous avons nos règles CSS.

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

Feuille de style interne

Une autre option pour styliser CSS consiste à utiliser une feuille de style interne. Cela signifie définir vos règles CSS à l'intérieur de l' élément de votre fichier HTML.

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

Styles en ligne

Moins fréquemment, vous vous retrouverez à la recherche de styles en ligne. Mais ils sont toujours importants à connaître car il y a certaines occasions où ils sont utiles.

Avec les styles en ligne, vous ajouterez le styleattribut à une balise HTML suivie de votre CSS pour styliser un élément.

This is my first paragraph.

This is my second paragraph.

Donc dans notre cas, le texte du premier paragraphe est rouge avec une taille de police de 20px. Le second, cependant, reste inchangé.

Examinons de plus près comment et quand utiliser les styles en ligne. Nous découvrirons également pourquoi un seul de nos paragraphes est stylé.

Qu'est-ce qu'une balise HTML?

Avec les styles en ligne, vous appliquez CSS à l' styleattribut dans la balise HTML d'ouverture.

Exemples de balises HTML:

  • ...
  • ...

  • ...

Les balises d'ouverture et de fermeture font souvent partie de l'élément HTML, qui peut contenir du texte, des données, une image ou rien du tout.

Ici, nous avons un élément de texte.

This is my first paragraph.

Nous pouvons utiliser des styles en ligne pour styliser cet élément en ajoutant l'attribut style à la balise d'ouverture, suivi de paires propriété-valeur CSS.

This is my first paragraph.

This is my second paragraph.

Voyons comment nous avons utilisé les styles en ligne.

Comment utiliser les styles en ligne

Ajouter lel'attribut style à la balise que vous souhaitez styliser, suivi d'un signe égal. Commencez et terminez votre CSS par des guillemets doubles.

Ajoutez des paires propriété-valeur à l'attribut style. Ajoutez un point-virgule après chaque paire propriété-valeur.

color: red; font-size: 20px; 

Donc, lorsque nous mettons tout ensemble, cela ressemble à ceci:

This is my first paragraph.

Points clés à connaître

Contrairement aux feuilles de style internes et externes, les styles en ligne ne contiennent pas d'accolades ni de sauts de ligne. Autrement dit, écrivez votre CSS sur la même ligne lorsque vous utilisez des styles en ligne.

De plus, gardez à l' esprit que les styles en ligne seulement affectent l'élément spécifique que vous ajoutez l'attribut de style avec des paires valeur de la propriété CSS.

Par exemple, dans le code ci-dessous, seul le premier paragraphe est de style rouge avec une taille de police de 20 px.

This is my first paragraph.

This is my second paragraph.

Si nous voulons styliser le texte des deux paragraphes avec des styles en ligne, nous devons ajouter du CSS à l'attribut style au second

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