HTML Tutorial

HTML style tag

HTML <style> Tag

The <style> tag is used to define internal CSS styles for an HTML document. This tag allows you to apply styling rules directly within the <head> section, affecting elements on the same page.

Purpose of <style> Tag

While external stylesheets (using <link>) are preferred for larger projects, the <style> tag is useful for small internal styles or quick tests.

Syntax

<style>
  selector {
    property: value;
  }
</style>

Example

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: #f0f0f0;
      }
      h1 {
        color: darkblue;
        font-size: 32px;
      }
      p {
        font-size: 18px;
      }
    </style>
    <title>Style Tag Example</title>
  </head>
  <body>
    <h1>Styled Page</h1>
    <p>This paragraph is styled using internal CSS.</p>
  </body>
</html>

When to Use

For small projects or single-page styling
To override external styles temporarily
When testing CSS directly in the HTML document

Conclusion

The <style> tag gives you the ability to apply CSS styles directly within your HTML document. For larger websites, it's better to use external stylesheets, but <style> is great for quick and localized styling.

🌟 Enjoyed Learning with Us?

Help others discover Technorank Learning by sharing your honest experience.
Your support inspires us to keep building!

Leave a Google Review

Topics