Skip to main content
Practice

style Tag

The <style> tag defines CSS styles for decorating elements within an HTML document.


Usage​

The <style> tag should be placed within the HTML <head> section.

By adding CSS rules inside the style tag, you can apply styles to various elements of a web page, as shown below.

Note: Detailed information about CSS will be introduced in a later HTML lesson!

Example of Using the style Tag
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: lightblue;
      }

      h1 {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Hello!</h1>
  </body>
</html>

The above style tag sets the web page's background-color to lightblue and centers the text of the <h1> tag.


Advantages of the style Tag​

  • Styles are applied directly to the web page, eliminating the need to reference separate CSS files.

  • It is useful when styles need to be applied only to a specific page.


Disadvantages of the style Tag​

  • Maintaining consistency can be challenging for complex websites that require the same styles to be repeated across multiple pages.

  • It can affect the loading time of the web page. A large amount of style information can increase the page size.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.