HTML-Style-tag

admin

2/13/2025

  html style tag in body      #HTML-Style-tag

Go Back

HTML Style Tag: A Beginner’s Guide to Using <style> for Web Design

In this article , we discribe the HTML <style> tag to add CSS to your web pages. Includes examples, features, and best practices for styling HTML elements.

Introduction to the HTML <style> Tag

The <style> tag in HTML is used to define CSS (Cascading Style Sheets) for a web page. It allows you to add styles like colors, fonts, and layouts directly within your HTML document. The <style> tag is typically placed inside the <head> section, but modern standards also allow it to be used within the <body> with the scoped attribute.

In this article, we’ll explore how to use the <style> tag, its features, and provide practical examples to help you style your web pages effectively.

html style tag in body #HTML-Style-tag

How to Use the <style> Tag

The <style> tag is used to embed CSS directly into an HTML document. Here’s the basic syntax:

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

For example:

<style>
    h2 { color: yellow; }
    p { color: green; }
</style>

Example of Using the <style> Tag

Below is an example of a basic HTML page using the <style> tag to apply styles:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Example Page</title>
        <style>
            h2 { color: yellow; }
            p { color: green; }
        </style>
        <style>
            h2 { color: green; }
            p { color: pink; }
        </style>
    </head>
    <body>
        <h2>This is a heading</h2>
        <p>This is a paragraph.</p>
    </body>
</html>

Steps to Create and View the Page:

  1. Open a text editor like Notepad (Windows) or TextEdit (Mac).
  2. Copy and paste the above code into the editor.
  3. Save the file with a .html extension (e.g., example.html).
  4. Open the file in a web browser to see the output.

Features of the <style> Tag

  1. Inline Styling: The <style> tag allows you to define CSS directly within your HTML document.
  2. Scoped Attribute: Modern HTML standards allow the <style> tag to be used within the <body> with the scoped attribute.
  3. Overriding Styles: If multiple <style> tags are used, the last one takes precedence.
  4. Customization: You can use the <style> tag to customize fonts, colors, layouts, and more.

Best Practices for Using the <style> Tag

  1. Place in <head>: For better organization, place the <style> tag inside the <head> section.
  2. Avoid Overuse: Use external CSS files for large projects to keep your HTML clean and maintainable.
  3. Use Specific Selectors: Be specific with your CSS selectors to avoid unintended style overrides.
  4. Test Across Browsers: Ensure your styles work consistently across different browsers.

Why Use the <style> Tag?

The <style> tag is useful for:

  1. Quick Styling: It’s ideal for small projects or quick prototypes.
  2. Inline Customization: You can add styles directly to specific sections of your HTML.
  3. Learning CSS: It’s a great way to experiment with CSS while learning web development.

Conclusion

The HTML <style> tag is a powerful tool for adding CSS to your web pages. By understanding how to use it effectively, you can create visually appealing and well-structured websites.

Start experimenting with the <style> tag in your projects today. If you found this guide helpful, share it with your peers and leave a comment below. For more HTML and CSS tutorials, subscribe to our newsletter!

Table of content