Academy HTML CSS JavaScript TypeScript SQL MongoDB Python NumPy Pandas PHP Java C C++ C# Bootstrap Tailwind CSS jQuery React Vue.js Node.js Git
❮ ❯

HTML Styles

Change colours, fonts and alignment with the style attribute.

✍️ 3 exercises + code challenge in this lesson
❮ Previous Next ❯

The style attribute adds CSS directly to an element. The syntax is style="property: value;".

Useful properties

  • background-color: background colour.
  • color: text colour.
  • font-family: typeface.
  • font-size: text size.
  • text-align: left, right or center alignment.
Inline styles are handy for quick tests. For real websites, put your styles in a CSS file (see the CSS tutorial).

Key Takeaways: HTML Styles

Mastering HTML Styles helps you write clean and reliable HTML code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

HTML Styles Code Example

HTML 
<body style="background-color: #F1F5F9;">
  <h1 style="color: #2563EB; text-align: center;">Styled heading</h1>
  <p style="font-family: Georgia; font-size: 20px;">A paragraph in Georgia, 20px.</p>
  <p style="color: white; background-color: #14B8A6; padding: 8px;">White text on teal.</p>
</body>
Free sign-in required · Google login available

HTML Styles Practice Exercises

Check what you learned in “HTML Styles”.

/ 3 solved
Fill in the blank

Use the style attribute to make the text red.

<p =": red;">Warning!</p>
✓ Correct! Not quite. Try again.
Multiple choice

Which CSS property centres text?

✓ Correct! Not quite. Try again.
Code challenge

Give the heading a blue background using the style attribute (background-color: blue).

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.
Finished this lesson?
Mark it complete to track your progress.
❮ Previous
HTML Paragraphs
Next ❯
HTML Text Formatting

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services