The HTML style attribute allows you to add inline CSS styles to your HTML tags.

A coding sample

This example makes use of the HTML style attribute for the following style changes:

  • To change the text color of the header to #FF0000 and to transform all its characters to uppercase
  • To change the text color of the paragraph element to #0000FF
<!DOCTYPE html>
<html lang="en">

<head>
	<title>A Sample Web Page</title>
</head>

<body>
	<h1 style="color:#FF0000; text-transform: uppercase;">Hello World</h1>
	<p style="color: #0000FF;">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</body>

</html>

Why you shouldn’t use inline styles

Here’s a list of reasons you should avoid using inline styles unless unavoidable:

  • They are hard to track and manage. They make the HTML source code hard to read and debug.
  • They bring extra weight to the HTML source code.
  • Browsers can’t cache the inline styles. Thus the website takes more time to load and respond.
  • You can’t reuse these inline styles anywhere else.

When you can make an exception to use inline styles

If you have too little amount of CSS code that creating a separate CSS file seems overkill.

Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript