Inline CSS
- We can apply CSS in a single element by inline CSS technique.
- The inline CSS is also a method to insert style sheets in HTML document. This method mitigates some advantages of style sheets so it is advised to use this method sparingly.
- If you want to use inline CSS, you should use the style attribute to the relevant tag.
Syntax:
<htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag> For example:
<h2 style="color:red;margin-left:40px;">Inline CSS is applied on this heading.</h2>
Advantages of Inline CSS:
- Inline takes precedence over all other styles. Any styles defined in the internal and external style sheets are overridden by inline styles.
- You can quickly and easily insert CSS rules into an HTML page, which is useful for testing or previewing changes and performing quick fixes on your website.
- There is no need to create an additional file.
- To apply styling in JavaScript, use the style attribute.
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.