The style tag is used to define an internal style sheet in an HTML file. It is the HTML element that adds CSS stylings directly into the HTML file. Inside the style tag, you can write CSS code as if you were in a CSS file.

A code example

Here is a simple example of how to use a style tag:

<!doctype html>
<html>
<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>This is my paragraph.</p>
</body>
</html>

In the above example, a style tag is usually added to the head section of the document since this tag is not part of the HTML contents. Inside the style tag, we add basic CSS stylings that will change the color of the paragraph into red color.

There are two cases where the style tag can be handy:

  1. The first is when you want to try or test CSS features quickly. The style element lets you add CSS styles right into the HTML file without the need to create a separate stylings file and link it to the HTML file.
  2. The second is when your website project has very limited CSS stylings, say about ten lines of code or less, and therefore you do not see the point in keeping them in a separate file.

However, if you want to create more CSS stylings, it is recommended to have separate files. One HTML file for adding the contents and one CSS file for adding stylings. That way, it will be easy to manage the website.

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