Code has been added to clipboard!

Inline CSS: Learn to Use CSS Inline and Style HTML Elements

CSS Inline

A defined stylesheet indicates the way browser formats the HTML document and displays the web page. There are three ways to link CSS to HTML, and this tutorial introduces the inline CSS styles method. After reading this article, you will know how to use HTML style tag in your code. Here is an illustration of all three methods:

Inline CSS

Inline CSS: Main Tips

  • The inline CSS helps you apply style rules to specific HTML elements.
  • The elements are modified by applying the style attribute.
  • The inline CSS is limited. For elaborate projects, you should consider other options: internal and external methods.

Inline CSS Explained

Inline CSS allows you to apply a unique style to one HTML element at a time. You assign CSS to a specific HTML tag by using the style attribute with any CSS properties defined within it.

In the following example, you can see how to describe CSS style properties in the same line of code with an HTML <p> tag. We use a style attribute to assign CSS styling properties. In this particular case, color and a value (blue) apply to the HTML <p> element.

Example
<p style="color: blue;">This is a paragraph.</p>

Inline CSS is useful to preview changes instantly or when you need to add CSS to only one or two elements. When you don't have access to your .css file, knowing how inline style CSS works can be crucial.

Tip: If you are working on a big project, using inline CSS may lead to messy HTML code. Use internal or external methods instead.

Inline CSS: Summary

  • You can link CSS to HTML in 3 different ways: internal, external, and inline.
  • Inline CSS allows you to style one unique HTML element.
  • The inline styles are added to a HTML tag with a style attribute.
  • Inline CSS style will always override style properties determined in internal or external style sheets.