Skip to content
Related Articles

Related Articles

HTML style attribute

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 21 Feb, 2022
Improve Article
Save Article

In this article, we will see the HTML style attribute, along with understanding its implementation through the examples. Styles in HTML are basically 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:

  • Inline Style: In this method, the style attribute is used inside the HTML start tag.
  • Embedded Style: In this method, the style element is used inside the <head> element of the document.
  • External Style: In this method, the <link> element is used to point to an external CSS file.

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 property 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: The browsers supported by style attribute are listed below:

  • Google Chrome
  • Internet Explorer
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!