html
  1. html-style-tag

HTML <style> Tag

  • The HTML <style> tag is used to define internal CSS for a webpage.
  • It allows you to specify CSS rules for the entire HTML document or for a specific section of code.
  • The syntax for using the <style> tag is as follows:

Syntax

<head>
  <style>
    /* CSS rules go here */
  </style>
</head>

Example

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: lightblue;
      }
      h1 {
        color: white;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to my website!</h1>
    <p>This is some sample text on my page.</p>
  </body>
</html>
Try Playground

Explanation

The <style> tag is typically placed within the <head> section of an HTML document. The CSS rules inside the <style> tag will apply to all elements within the HTML document unless overridden by more specific rules.

Use

The <style> tag is particularly useful for applying CSS styles to specific sections of HTML code within a webpage. By using the <style> tag, you can create more organized and readable code, as well as avoid duplicating code across multiple pages.

Important Points

  • The <style> tag should always be placed within the <head> section of an HTML document.
  • You can specify CSS rules for specific elements in your HTML code by using the element name followed by curly braces {} and the CSS properties you want to specify.
  • You can also specify CSS rules for a class or ID by using the .class-name or #id-name selectors respectively.

Summary

The HTML <style> tag is a powerful tool that allows you to define CSS rules for an entire webpage or specific sections of code. By using the <style> tag, you can create more organized and easy-to-read code, as well as apply styles to specific elements in your HTML code.

Published on: