RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/html-style-attribute/ below:

HTML Style Attribute - GeeksforGeeks

HTML Style Attribute

Last Updated : 07 Jun, 2025

The HTML style attribute allows CSS to be applied directly within HTML tags. This enables styling of an element without the need for an external CSS file or a <style> block. It provides a quick, inline way to apply styles to individual elements.

Syntax

<tagname style="property: value;">
    Content goes here
</tagname>

tagname: This is the HTML element to which you want to apply styles (like <p>, <div>, <h1>, etc.).
property: This is the style property you want to change (e.g., color, font-size, background-color).
value: This is the value that defines how the property should look (e.g., red, 16px, #00FF00).

How Does the Style Attribute Work?

When we apply styles using the style attribute, they only affect that specific HTML element. Unlike external or internal CSS, which can affect multiple elements at once, inline styles are individual and specific.

Now let's understand this with the help of example

HTML


 <html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Style Attribute Example</title>
</head>
<body
    style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; margin: 0;">

    <h1 style="color: green; text-align: center;">Welcome to My Website</h1>

    <p style="font-size: 18px; color: purple; text-align: center;">This is a simple paragraph with purple text and a
        font size of 18px.</p>

    <div
        style="width: 300px; height: 150px; background-color: lightblue; padding: 20px; border: 2px solid blue; display: flex; justify-content: center; align-items: center;">
        This box has a light blue background, padding, and a blue border.
    </div>
</body>
</html>

Commonly Used CSS Properties in the style Attribute:

Color: Changes the color of the text.

<p style="color: blue;">This is a blue paragraph.</p>

Font Size: Changes the size of the text.

<p style="font-size: 20px;">This is a larger paragraph.</p>

Background Color: Changes the background color of an element.

<div style="background-color: yellow;">This is a yellow box.</div>

Text Alignment: Aligns text (left, center, right).

<h1 style="text-align: center;">This is a centered heading.</h1>

Padding: Adds space inside an element around its content.

<div style="padding: 10px;">This box has padding around it.</div>

Margin: Adds space outside an element.

<div style="margin: 20px;">This box has margin around it.</div>

Width and Height: Controls the dimensions of an element.

<div style="width: 200px; height: 100px; background-color: grey;">This box is 200px wide and 100px tall.</div>

Border: Adds a border around an element.

<p style="border: 1px solid black;">This paragraph has a border.</p>Other Types of Styling in HTML

Below are the different types of styling in HTML: 1. Inline Style

Inline styling applies CSS rules directly inside an HTML tag using the style attribute. Multiple styling properties are written within the attribute, and each property is separated by a semicolon.

HTML


 <html>
<head>
    <title>Inline Styling</title>
</head>
<body>
    <h1 style="color:Blue;font-size:25px;">
        Example of Inline Style
    </h1>
    <p style="color:red;">First paragraph</p>

    <p style="color:green;font-size:40px;">
        Second paragraph
    </p>
    <hr style="border-color:orange;">
</body>
</html>

Output:

style attribute 2. Embedded Style

Embedded or internal styles are written within the <head> section of the HTML document, inside a <style> tag. These styles only apply to the specific document where they are defined.

HTML


 <html>
<head>
    <style type="text/css">
        body {
            background-color: powderblue;
        }

        h1 {
            color: black;
            font-family: arial;
        }

        p {
            color: yellow;
            font-family: verdana;
        }
    </style>
    <title>Embedded Styling</title>
</head>
<body>
    <h1>Example of Embedded Style</h1>
    <p>First paragraph.</p>

</body>
</html>

Output:

Embedded Style 3. External Style Sheet:

External style sheets are useful when CSS needs to be applied to multiple web pages. They store all the style rules in a separate file that can be linked to from an HTML document. There are two ways to link external style sheets:

Linking External Style Sheets: Linking an external style sheet connects a separate CSS file to an HTML document using the <link> tag. This allows the styles in the CSS file to be applied to the HTML elements. The href attribute points to the location of the CSS file.

HTML


 <html>
<head>
    <link rel="stylesheet" type="text/css" 
          href="/html/css/externalstyle.css">
    <title>External Styling</title>
</head>
<body>
    <h3>Example of Linking External Style Sheet</h3>
    <p>First paragraph.</p>

</body>
</html>

Output:

External Style

Importing External Style Sheets External style sheets can also be added to an HTML document using the @import rule. This tells the browser to load the CSS file. The @import statement can be used inside the <style> element in the HTML document.

HTML


 <html>
<head>
    <style type="text/css">
        @import url("/html/css/importstyle.css");

        p {
            color: powderblue;
            font-size: 30px;
        }
    </style>
    <title>Importing external Styling</title>
</head>
<body>
    <h3>Example of external style sheet using import</h3>
    <p>First paragraph</p>

</body>
</html>

Output:

Importing External Style Conclusion

the HTML style attribute allows quick, inline styling of individual elements without the need for external CSS. While ideal for small, specific changes, for larger projects, external or internal CSS is more efficient and maintainable.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4