How to set inline styles in CSS

CSS is a styling language that helps us change the appearance of our HTML document. There are three ways to apply CSS to an HTML document.

  • External styling: In this approach, we create an external CSS file containing all the styling of our HTML document and include it in our HTML file.

  • Internal styling: In this approach, we add all the styling content under the <style> tag in our HTML file.

  • Inline styling: In this approach, we apply styling directly to each HTML element in the HTML file.

In this Answer, we will discuss inline styling in CSS.

Inline styling

Inline styling is a simple and flexible way to directly apply styling to each HTML element using the attribute style. This type of styling has precedence over the other styling methods.

Syntax

To apply inline styling, we write the styling content in style attribute of the element.

For a single style property:

<element style="property: value;">
<!-- Content -->
</element>

For multiple style properties:

<element style="property: value; property: value;">
<!-- Content -->
</element>

Coding example

In the following example, we will demonstrate how to apply styling directly to the <h1> and <body> element using inline styling.

Conclusion

Inline styling is useful when we want to apply specific styles to individual elements. It is more suitable for smaller styling needs and allows for quick adjustments.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved