HTML style attribute
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