Skip to content

Try our new Crash Courses!

Buy one of our new Crash Courses, now hosted on Podia.

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 Reference > Writing CSS