HTML <style> Tag

The HTML <style> tag is used to define internal CSS (Cascading Style Sheets) directly within an HTML document. It allows you to specify styles for HTML elements, including their layout, appearance, and behavior. The <style> tag is placed inside the <head> section of the document and affects all the matching elements on the page.

Internal CSS defined using the <style> tag is useful for adding styles specific to a single page or when external stylesheets are not needed.

Basic Syntax of HTML <style> Tag

The basic structure of the <style> tag is:

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

Here, selector specifies the HTML elements to style, and property: value; defines the styles to apply.

Example of Internal CSS with the <style> Tag

Here’s an example of defining styles within the <style> tag:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                font-family: Arial, sans-serif;
                margin: 20px;
            }
            h1 {
                color: #007BFF;
                text-align: center;
            }
            p {
                font-size: 16px;
                line-height: 1.5;
            }
        </style>
    </head>
    <body>
        <h1>Welcome to My Page</h1>
        <p>This is an example of using the <style> tag to add internal CSS to an HTML document.</p>
    </body>
</html>
Example of Internal CSS with the <style> Tag

Explanation: The internal styles define the font, text color, and alignment for the page elements like <body>, <h1>, and <p>. These styles apply only to this document.

Attributes of HTML <style> Tag

  • type: Specifies the MIME type of the styles. The default value is text/css, so this attribute is optional in modern HTML.
  • media: Specifies the media type for which the styles are defined, such as screen, print, or all.

For example, you can use the media attribute to apply styles for specific devices:

</>
Copy
<style media="print">
    body {
        font-size: 12px;
        color: black;
    }
</style>

This style will only apply when the document is printed.

Styling Specific Elements

Using the <style> tag, you can target different elements and classes to define custom styles:

</>
Copy
<style>
    .highlight {
        background-color: yellow;
        font-weight: bold;
    }
    #important {
        color: red;
        font-size: 18px;
    }
</style>

<p>This is a <span class="highlight">highlighted</span> word.</p>
<p id="important">This is an important message.</p>
Styling Specific Elements

Result: The word “highlighted” is displayed with a yellow background and bold font, while the “important message” is red and larger in size.

Advantages of Using the <style> Tag

  • Convenient for Small Projects: Ideal for adding styles to single-page projects without the need for an external stylesheet.
  • Immediate Application: Internal styles are immediately applied without additional file loading.
  • Media-Specific Styling: Apply styles for different media types like print or screen within the same document.

Limitations of the <style> Tag

  • Not Reusable: Styles defined in the <style> tag cannot be reused across multiple pages.
  • Increased Page Size: Inline styles can bloat the size of the HTML file, affecting performance for larger projects.
  • Harder Maintenance: Managing styles within the HTML document can become cumbersome for complex layouts.

For larger projects, external stylesheets are preferred for better maintainability and performance.

Practical Applications of the <style> Tag

  • Prototyping: Quickly style elements during the development phase without setting up external files.
  • Single-Page Projects: Ideal for simple webpages that don’t require reusable styles.
  • Media-Specific Adjustments: Define print-specific styles or responsive styles directly in the HTML document.
  • Testing and Debugging: Temporarily apply styles for troubleshooting issues during development.

The <style> tag is a flexible and quick solution for styling elements in small-scale projects or specific scenarios.