Style Tag in HTML

The <style> tag is an HTML element used to embed or reference styles (such as CSS) within an HTML document. The <style> tag should be placed within the <head> section of an HTML document.

Here is a basic example of the <style> tag that includes inline styles:

Example of Custom Style

<head> 
    <style> 
        p { 
            color: red; 
            font-size: 16px; 
        } 
    </style> 
</head>

In the example above, the CSS styles are contained within the <style> tag and will be applied to all <p> elements within the HTML document.

The <style> tag can also be used to reference an external stylesheet using the href attribute:

Add CSS file to HTML

<head> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
</head>

In the example above, the href attribute specifies the URL of the external stylesheet. The CSS styles contained within the external stylesheet will be applied to the HTML document.

The <style> tag supports several attributes, including:

media: Specifies the media types for which the stylesheet is intended. This attribute can be used to specify stylesheets that are intended for specific devices, such as printers or screens.
type: Specifies the type of stylesheet being included. The default value is "text/css".

Using styles within your HTML document is a powerful way to control the appearance and layout of your web pages. Whether you choose to include inline styles or reference an external stylesheet, the <style> tag provides a simple and flexible way to add style to your HTML documents.

In summary, the <style> tag is an essential part of HTML that is used to embed or reference styles within an HTML document. Whether you choose to include inline styles or reference an external stylesheet, the <style> tag provides a simple and flexible way to add style to your HTML documents and control the appearance and layout of your web pages.