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
.png)
.png)