While developing a website we can add styles in various ways. We can write CSS styles in a CSS file and import it in HTML file, write in <style> tag of <head> or write inline style within each element of the <body>.
Bad
These are some of the problems with inline styling.
Lack of reusability
Using the same CSS class multiple times should be one of the major aims in adding style to a website. As our project gets larger if we do not use the same class for the same type of styles, there is a good possibility of writing redundant styles which unnecessarily makes the project larger. If we write inline style, we can never use it multiple times which breaks the DRY principle.
Inability to use CSS selectors
We cannot use CSS selectors while writing inline styles. Selectors like before, after, hover, focus etc are very much useful for styling which we simply cannot use in inline styling.
Difficulty in code readability
In a large HTML file, there will be a lot of elements. If in addition there are inline styles then it becomes very much difficult for someone to read and understand that HTML code.
Lack of writing media queries
Web developers nowadays must make the website responsive. To make the site responsive writing media queries is a must where different CSS rules are applied based on screen width. Inline style does never allow us to do that.