Skip to content

Help us create more tutorials! Make a donation using the Donate button or become a member using the button below to hide this banner and track your progress.

Inline styles – CSS

Demo

Summary

To create inline styles, use the style attribute on an HTML element:

<p style="color:red;">Paragraph text with a style attribute.</p>

Details

Inline styles allow you to add styles directly to individual elements inside your HTML code.

Multiple properties

You can separate multiple properties and values using semicolons.

<p style="color:red; font-size:20px;">Paragraph text with a style attribute.</p>

Note: As a general rule, you should keep all of your CSS code in an external stylesheet and link it to your HTML files. You should only use inline styles for quick testing of styles.

Exercises

First, recreate the HTML code from the Demo section. Then try changing the values for the properties.

References

style attribute on MDN

Back to: CSS Course > Writing CSS