インラインCSSガイド–HTMLタグを直接スタイル設定する方法

HTMLを作成したので、CSSでスタイルを設定する必要があります。1つの方法は、インラインスタイルを使用することです。これが、この記事の内容です。

This is my first paragraph.

インラインスタイルのニュアンス(いつ、なぜ、どのように使用するか)に飛び込む前に、HTMLのスタイルを設定する他の方法を知っておくことが重要です。そうすれば、コードに最適なオプションを選択できます。

オプションの概要は次のとおりです。

外部スタイルシート

開発者は通常、すべてのCSSを外部スタイルシートに保持します。HTMLファイルで、要素を使用して、CSSを含む外部スタイルシートにリンクします。

ファイルindex.cssの中に、CSSルールがあります。

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

内部スタイルシート

CSSをスタイリングするための別のオプションは、内部スタイルシートを使用することです。これは、HTMLファイルの要素内でCSSルールを定義することを意味します。

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

インラインスタイル

それほど頻繁ではありませんが、インラインスタイルに手を伸ばすことができます。ただし、便利な場合があるため、知っておくことが重要です。

インラインスタイルでは、スタイルを追加しますHTMLタグの属性と、それに続く要素のスタイルを設定するCSS。

This is my first paragraph.

This is my second paragraph.

したがって、この場合、最初の段落のテキストは赤で、フォントサイズは20pxです。ただし、2番目のものは変更されていません。

インラインスタイルをいつどのように使用するかを詳しく見てみましょう。また、段落の1つだけがスタイル設定されている理由も明らかにします。

HTMLタグとは何ですか?

インラインスタイルでstyleは、開始HTMLタグの属性にCSSを適用します。

HTMLタグの例は次のとおりです。

  • ..。
  • ..。

  • ..。

開始タグと終了タグは、多くの場合HTML要素の一部であり、テキスト、データ、画像、または何も含まない場合があります。

ここに、テキストの要素があります。

This is my first paragraph.

インラインスタイルを使用して、開始タグにstyle属性を追加し、その後にCSSプロパティと値のペアを追加することで、この要素のスタイルを設定できます。

This is my first paragraph.

This is my second paragraph.

インラインスタイルの使用方法を見ていきましょう。

インラインスタイルの使用方法

追加しますスタイルを設定するタグのstyle属性と、それに続く等号。CSSを二重引用符で開始および終了します。

プロパティと値のペアをstyle属性に追加します。各プロパティと値のペアの後にセミコロンを追加します。

color: red; font-size: 20px; 

したがって、すべてをまとめると、次のようになります。

This is my first paragraph.

知っておくべきキーポイント

内部および外部のスタイルシートとは異なり、インラインスタイルには中括弧や改行は含まれていません。つまり、インラインスタイルを使用する場合は、CSSをすべて同じ行に記述します。

また、インラインスタイル、CSSプロパティと値のペアを使用してスタイル属性を追加する特定の要素にのみ影響することに注意してください。

たとえば、以下のコードで、最初の段落のみがフォントサイズ20pxの赤でスタイル設定されています。

This is my first paragraph.

This is my second paragraph.

両方の段落のテキストをインラインスタイルでスタイル設定する場合は、CSSを2番目のスタイル属性に追加する必要があります

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