<style> Tag in HTML | Adding CSS to HTML

The <style> tag in HTML is used to define internal CSS (Cascading Style Sheets) for the document. This tag allows you to apply styles directly within the HTML document, and it is placed within the <head> section of the page.

Key Points on <style> Tag:

The <style> tag contains CSS rules that define the appearance of HTML elements in the document.
It must be placed inside the <head> section of the HTML document.
Styles defined inside the <style> tag apply to the entire HTML page unless overridden by inline or external styles.
It is recommended to use external stylesheets for larger websites, but the <style> tag is useful for small projects or testing purposes.
The CSS rules inside the <style> tag are written just like regular CSS, with selectors, properties, and values.

Syntax of <style> Tag:

Syntax Example

<style>
            /* CSS rules here */
            selector {
                property: value;
            }
        </style>

Example of <style> Tag in HTML:

This example demonstrates how to use the <style> tag to define CSS within an HTML document.

Code Example

<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>HTML Style Tag Example</title>
            <style>
                body {
                    font-family: Arial, sans-serif;
                    background-color: #f4f4f4;
                }
                h1 {
                    color: #333;
                    text-align: center;
                }
                p {
                    font-size: 18px;
                    color: #555;
                }
            </style>
        </head>
        <body>
            <h1>Welcome to HTML Style Tag Example</h1>
            <p>This paragraph is styled with CSS defined within the <style> tag in the head section of the HTML document.</p>
        </body>
        </html>

Output

Welcome to HTML Style Tag Example

This paragraph is styled with CSS defined within the <style> tag in the head section of the HTML document.

The <style> tag is a powerful tool for adding custom CSS directly into an HTML document. It allows you to control the appearance of your webpage without needing external stylesheets, making it useful for quick styling or testing.