Inline Styles
- Kim Collins (Unlicensed)
Avoid using inline styles.. Put styles in an external stylesheet or <style> block on the page.
Inline CSS styles is styling coded inline with an element in HTML, e.g. <p style="border: 1px solid red">.
Users may choose to disable CSS. Some users, particularly those with low vision or colour blindness, use custom style sheets. Custom style sheets allow users to define personalized needs and preferences such as custom colour combinations and font sizes to make it easier for them to read content on the web. In some cases, inline styles can override these custom user style sheets, interfering with the user's ability to interact with your content.
Beyond accessibility, inline styles are also discouraged because they lead to repetition, make code maintenance more difficult, and are blocked by default with Content Security Policy. (See Google's statement on inline styles:Â Optimize CSS Delivery.)
Instead of using inline styles, separate content from design by using an external stylesheet or <style> block on the page.