Skip to main content
Practice

style Tag

The <style> tag is used to define CSS styles for elements within the HTML document.


Usage​

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

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

(Note: Detailed information about CSS will be introduced after the HTML course)

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

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

The above style tag sets the background color of the web page to light blue and centers the text of the <h1> tag.


Advantages of the style Tag​

  • Styles can be applied directly to a web page without referencing an external CSS file.

  • Useful for applying styles to specific pages.


Disadvantages of the style Tag​

  • Maintaining complex websites can be difficult, as you may need to apply the same styles repeatedly across multiple pages.

  • It can impact the loading time of the web page since a large amount of style information increases the page size.


Summary of the style Tag​

  • The style tag is placed within the <head> section.

  • While it allows you to include CSS style rules directly in the HTML document without referencing an external CSS file, it can be difficult to maintain for complex websites.

Want to learn more?

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