HTML <style> Tag

The HTML <style> tag is used to define internal CSS (Cascading Style Sheets) within an HTML document. It allows web developers to apply styling rules to HTML elements directly within the <head> section of the page, without the need for an external CSS file. The <style> tag is essential when you want to include CSS in a single document, offering more control over the appearance and layout of the webpage.

The use of the <style> tag is ideal for small-scale projects, where external stylesheets are unnecessary. However, for larger projects or multiple pages, linking an external stylesheet is a more efficient approach. The tag helps create a clean, organized design while improving the page's visual appeal.

Syntax of the <style> Tag

The <style> tag is placed within the <head> section of the HTML document, and the CSS rules are written between the opening and closing <style> tags.

html
<style>
  /* CSS styles go here */
</style>

Here’s the general structure for using the <style> tag in HTML:

html
<!DOCTYPE html>
<html>
<head>
    <title>Example of Style Tag</title>
    <style>
        body {
            background-color: lightgray;
        }
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

In this example, the internal CSS styles within the <style> tag apply a background color to the body and change the heading color to blue.

Attributes of the <style> Tag

While the <style> tag itself doesn’t have many attributes, there are a few important ones to be aware of:

AttributeDescription
typeSpecifies the type of style information, typically set to “text/css”.
mediaSpecifies what media or device the styles are designed for (e.g., screen, print).
scopedLimits the scope of the styles to the specific section of the document. (Deprecated)
  • type: In modern HTML5, the type attribute can be omitted as it defaults to text/css, but it's good practice to include it when working with older HTML versions.
  • media: This attribute can be used to define device-specific styles, such as styles that apply only when printing a page.

Examples of the HTML <style> Tag

Example 1: Internal Styling Using the <style> Tag

html
<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS Example</title>
    <style>
        p {
            font-size: 18px;
            color: green;
        }
    </style>
</head>
<body>
    <p>This paragraph is styled using internal CSS.</p>
</body>
</html>

In this example, the paragraph (<p>) is styled directly within the HTML document using the <style> tag. The font size is set to 18px, and the text color is green.

Example 2: Using Media Attribute in the <style> Tag

html
<!DOCTYPE html>
<html>
<head>
    <title>Media-Specific Styles</title>
    <style media="print">
        body {
            font-family: Arial, sans-serif;
            color: black;
        }
    </style>
</head>
<body>
    <h1>This is styled for print media</h1>
    <p>When printed, the body text will be in Arial font.</p>
</body>
</html>

In this example, the styles defined within the <style> tag apply only when the page is printed. The media = “print” attribute ensures that the styles are activated for print output, making the content more readable in print format.

FAQs About HTML <style> Tag

Q1: What is the purpose of the HTML <style> tag?
A: The <style> tag allows you to include CSS styles directly within an HTML document, which helps define the visual presentation of HTML elements.

Q2: Where should the <style> tag be placed in an HTML document?
A: The <style> tag should be placed within the <head> section of the HTML document. However, in some cases, it can also be used in the <body> section with the scoped attribute, but this is not common and is deprecated.

Q3: Can the <style> tag be used for external CSS?
A: No, the <style> tag is only for internal CSS. To link to an external CSS file, you would use the <link> tag.

Q4: What is the difference between inline CSS and internal CSS with the <style> tag?
A: Inline CSS is applied directly to individual HTML elements using the style attribute, while internal CSS is applied within the <style> tag in the <head> section and can affect multiple elements throughout the document.

Q5: Does the <style> tag impact SEO?
A: While the use of the <style> tag does not directly affect SEO, a well-organized CSS structure contributes to faster page loading times and a better user experience, which can indirectly improve SEO rankings.

tools

HTML

Related Articles