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.
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.
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.
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.
Supported Browser: The browsers supported by style attribute are listed below:
- Google Chrome
- Internet Explorer
- Microsoft Edge