HTML style attribute

21 Feb, 2022
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
nidhi_biet
ManasChhabra2
bhaskargeeksforgeeks
HTML-Attributes
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.