Open In App

HTML style attribute

Improve
Improve
Like Article
Like
Save
Share
Report

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

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.

HTML




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

HTML




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

HTML




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

HTML




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


Last Updated : 18 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads