HTML style attribute

Last Updated : 29 Aug, 2024

In this article, we will see the HTML style attribute, along with understanding its implementation through examples. Styles in HTML are rules that describe how a document will be presented in a browser. Style information can be either attached as a separate document or embedded in the HTML document. There are 3 ways of implementing style in HTML

Table of Content

Inline Style:
Embedded Style:
External Style Sheet:

Supported Tags:

It supports all HTML elements.

Inline Style:

In Inline styling, the CSS rules are directly written inside the starting tag using the style attribute. The style attribute includes a series of CSS properties and value pairs. Each ‘ property: value ‘ pair is separated by a semicolon ( ; ). This attribute will override the style properties globally for any relevant style set.

Example: This example describes the internal style by specifying the style attribute to add the various styling properties.

<!DOCTYPE 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

Embedded Style:

Embedded or internal style sheets only affect the document they are embedded in. Embedded style sheets are defined in the <head> section of an HTML document using the <style> tag.

Example: This example describes the embedded style property.

<!DOCTYPE html>
<html lang="en">

<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

External Style Sheet:

External Style Sheets method can be useful when the CSS has to be applied to various web pages. An external style sheet holds all the style rules in a separate document that you can link from an HTML file on your site. There are two ways of attaching external style sheets:

Linking External Style Sheets
Importing External Style Sheets

Linking External Style Sheets:

In this method, an external style sheet is linked to an HTML document using the <link> tag.

Example: This example describes the external style sheet to add the various styling properties.

<!DOCTYPE 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 be loaded into an HTML document using “@import“. The “@import” statement instructs the browser to load the CSS file. Other CSS rules can also be included using the <style> element.

Example: This example describes the importing external style sheet to add the styling properties from the external style.

<!DOCTYPE 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

Supported Browser:

Google Chrome 1
Microsoft Edge 12
Firefox 1
Opera 15
Safari 1