The Do's and Don'ts of Inline Stylings

24.01.25 04:03 PM - By Dominic

Today in the life of a Digital Scientist, our Developer, Dom outlines the do's and do not's of using inline stylings in your HTML.


Having worked in this field for a few years now, I can say that we have experience in all sorts of builders and code. So, when an issue arises, we know how to troubleshoot and take care of it. Take one of our clients as an example: They wanted their website optimised for mobile devices and also wanted their website to have a more distinctive style. So, as usual, I booted up the builder and identified the problems that needed to be fixed to optimise the website and readied some CSS for their custom styling. However, when I added the custom classes to the elements, they didn’t react to my code.


The website builder our client was using has a feature where a pop-up menu lets you change things like fonts or text colours (or, 'styles'). However, when you make these changes, they are applied directly to the element as 'inline styles'. This means the style is locked onto that specific element, like a text box or button. Because of this, if you try to apply a general style using a CSS class (for example, to change the text colour) it won’t work, as the inline style takes priority in the CSS hierarchy.


If you're struggling then to understand why your styling is not applying, it could be due to inline styles overriding CSS class selectors, either globally or on individual elements.

Shown in the image above, the text element has multiple inline styles that dictate its alignment, font size and even colour. Adding any stylings using CSS classes, such as the example-class that has been added, won’t cause any changes on the builder as any custom classes are declared further up the chain and are overwritten.

Why Do Inline Stylings Matter?

Developers, like ours, do not use inline stylings as they are considered bad practice. This is due to a number of reasons, such as keeping HTML and CSS separate. HTML is already long-winded with a number of dividers, elements and classes that already need to be included. Adding CSS for inline styles to this mix makes the code more complicated than it should be. This is why CSS should be kept to their stylesheets and only referenced in the header of the HTML code. Another reason they are bad practice is because of the editability of this type of style. As these only affect the element that they have been assigned to, if you were to create a global class (a class that is intended for use across the entire project) to affect every element that has the class, it wouldn’t have any effect on the elements with inline styles, due to them operating higher up in the hierarchy. This then means that you’d have to go back individually and change the style of every inline element, wasting time that could be spent on other tasks.

Could Inline Styling Impact My Site's Performance? Is It Bad for SEO?

Inline styling can significantly impact your site's load speed, depending on the size of your site and the extent to which inline styles are used. Instead of efficiently applying CSS classes across multiple elements, inline styling is often applied on an individual basis. This leads to unnecessary code bloat, as each element carries both its inline styles and any associated CSS classes. As a result, browsers need to process additional style rules, which can slow down page loading times.


From an SEO perspective, site performance is a critical ranking factor. When competing with businesses that have strong foundations in areas such as high-quality content, keyword relevance, technical SEO, backlink profiles, mobile usability, and user experience (UX), technical optimisations like performance improvements could be the tipping point that sets you apart. Search engines favour fast, well-structured websites that provide seamless experiences across all devices, making performance a crucial element in achieving top rankings.


When our QuickFire team work on a client's SEO market research, we focus on major opportunities such as content strategy, technical health, and link-building efforts. However, in highly competitive industries, we take a deeper dive into performance-related micro-optimisations -small but meaningful improvements that collectively enhance your site's ranking potential. These refinements can be the key to outperforming competitors, resulting in higher traffic, increased enquiries, and greater business growth.

When Should I Use Inline Stylings?

Inline stylings may be bad practice, but they can also be used in useful ways. One instance is in emails: When building an email, some users may add HTML for advertisements or just to make the email look fancier. However, emails cannot use style tags to contain CSS as many email providers do not support it. To combat this, inline styles can be used to add custom features to the elements you need them on.


Inline styles are also commonly used on websites that rely on JavaScript. When JavaScript is used to make changes to a website, such as hiding an element when a button is clicked, it applies inline styles to achieve this. For instance, it might add the "display: none" style directly to the element to make it disappear from view.



At Digital Scientists, we know when and where to use inline stylings, so when we do use them, it is for an appropriate reason. Using our services, you can be safe in the knowledge knowing that we know the best practices for website development, and we deploy our knowledge accurately and efficiently on any website that we build with Pixel Perfect website designs.

Dominic