Which HTML Attribute is Used to Define Inline Styles?
Learn via video course
![JavaScript Course With Certification: Unlocking the Power of JavaScript](https://www.scaler.com/topics/images/mrinal_bhattacharya.webp)
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
- The style attribute in HTML is used to define the inline style within the HTMl tags.
- Any style defined globally, such as styles specified in the <style> tag or in an external style sheet, will be overridden by the style attribute.
- It belongs to the Global Attributes group and can be applied to any HTML element.
Syntax
We can write the 'style' attribute followed by style definitions' like the color , font-size, text-alignment etc. inside the tags of any HTML element as folllows:
Syntax
Use Of The Style Attribute
Let us look at some examples for how to use HTML attribute to define inline styles.
Example
Output
This is a styled header
I am happy to read this line styled in red color
As we can see the examples given above do the following things:
- change header color, font-size and position of HTML header
- change the color of a paragraph in HTML
Why You Shouldn’t Use Inline Styles
Here are some reasons why you should avoid using inline styles unless absolutely necessary:
- They give the HTML source code more weight.
- They're difficult to keep track of and manage. They make it difficult to read and debug HTML source code.
- These inline styles can't be used anywhere else or in other words, they can't be reused for some other HTML element as we do in external style sheet styling.
- Inline styles cannot be cached by browsers. As a result, the website takes longer to load and reply.
Browser Support
Attribute | Chrome | IE | Firefox | opera | safari |
---|---|---|---|---|---|
style | yes | yes | yes | yes | yes |
Conclusion
- The style attribute in HTML is used to define the inline style within the HTMl tags.
- Since it overrides any style set globally, generally we prefer not to use it.
- It is supported by most of the browsers.
- In case we have very less usage of styling and CSS in HTML, then we can use style attribute.