Avoid inline CSS

css image
css image

The idea of this blog post got me from a comment I made in a post on LinkedIn.

“Good luck, and try to avoid Inline CSS”.

— Me

“For the inline CSS may I know why ?”

The post owner asked me

There are three ways to include CSS on web page:

  • Inline: the CSS is defined inside a style=”…” attribute, in the HTML tag,
  • Internal: the CSS is defined inside a <style> tag in the <head> section,
  • External: the CSS is loaded from a <link> in a separate file?

My answer, why you should avoid inline CSS

Imagine that you have to change CSS for your site or app in the future, and you have 100 line of code that they have inline CSS. You must change each line with separate way, instead of that you can just use one CSS class and change it all in one way.

When you have CSS file, your style can be cached in the browser and load it very quickly when you revisit it in the future.

Your HTML code will weigh more, so your load time will be more long.

Your web pages will be more accessible.

So for that why you should avoid inline css in your web pages.. HOPE IT WILL BE HELPFUL

Leave a Reply

Your email address will not be published. Required fields are marked *