How to Add Inline Styles to HTML Elements

CSS
f t g+ in

You can style individual HTML elements by applying inline styles and we will demonstrate how to do that in this tutorial.

Thumbnail Blaster - Video Thumbnail Creation Software

You can apply inline CSS styles to individual HTML elements on your web page. Inline styles are used to give style to specific elements that do not share the same style with other elements on your website. Like external style sheets and internal style sheets, inline styles are also a valid type of defining the style and layout of a web page (HTML document).

The following example shows how inline styles are applied to some common HTML elements:

<!DOCTYPE html>
<html>
<head>
  <title>My Web Page</title>
</head>
<body>
  <p style="font-weight: bold">This is a paragraph with bold text.</p>
  <p><a href="portfolio.html" style="color: blue"/>This is a blue link.</a></p>
</body>
</html>

Inline styles should be avoided if multiple elements on multiple pages are styled in the same way, because using inline styles in that case will add unnecessary clutter of code. If you are styling multiple elements on the same page in the same way, simply use internal style sheets; if you are styling multiple elements on multiple pages in the same way, simply use external style sheets.

Was this post helpful?

Please consider sharing it, and supporting us with a small tip. Thank you :)

f t g+ in