We have the option to implement CSS on an individual element using the inline CSS method.
Utilizing inline CSS within an HTML document is an additional approach for incorporating style sheets. While this technique offers a way to apply styles directly to individual elements, it is recommended to exercise caution and use this method judiciously to avoid certain drawbacks associated with it.
If you intend to apply inline CSS, you must add the style attribute to the appropriate tag.
Syntax:
Example
<htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>
Example
Example
<h2 style="color:red;margin-left:40px;">Inline CSS is applied on this heading.</h2>
<p>This paragraph is not affected.</p>
Output:
Inline CSS is applied on this heading.
This paragraph is not affected.
Disadvantages of Inline CSS
- You cannot use quotations within inline CSS. If you use quotations the browser will interpret this as an end of your style value.
- These styles cannot be reused anywhere else.
- These styles are tough to be edited because they are not stored at a single place.
- It is not possible to style pseudo-codes and pseudo-classes with inline CSS.
- Inline CSS does not provide browser cache advantages.