In HTML, the <style> tag is generally used to set styles inline on specific elements. While this method is convenient and easy to use, it has major drawbacks. In this post, we’ll look at six reasons you should avoid styling inline in HTML whenever possible. Read on to learn more!
Styling inline in your HTML document may seem like a quick win but there are clear reasons why you shouldn’t style inline. HTML inline styling can be difficult to maintain and result in hours of wasted time.
This article will explain the difference between inline styling and why you shouldn’t style inline. In the long term, you will be better off adding a .css file in your HTML document as a style sheet. If you are unsure of how to connect a css stylesheet to HTML document you can click here.
What is Inline styling
Inline styling in HTML is applying styles directly to elements without using CSS.
Inline styling applies a CSS style characteristic, like font colour, to a single HTML element using the <style> tag in the HTML line that contains the text you want to change hence the name Inline.
In general, it’s best to avoid using inline styles, and this article will touch on 6 reasons why; however, there are some cases where inline styling can be useful:
- If you want to make a small change to an element’s style, inline styling is the easiest way.
- If you’re using a style sheet that you don’t have permission to edit, you can use inline styles to override the styles in the style sheet, because of the way the CSS cascades its syles. You can learn why inline styling overrides the .CSS file in this article
For example, if you want to create a style for a specific element on your page, you can use inline styling to do it. Just add the style attribute to the element’s tag, and specify the properties you want to change.
Here is an example of what inline styling looks like:
<!DOCTYPE html>
<html>
<head>
<title>Why you shouldn’t style inline </title>
</head>
<body>
<p style = "color:#009900; font-size:50px;
font-style:italic; text-align:center;">
Join the World Of Dev mailing list to get our Discord server Link!
</p>
</body>
</html>
Why you shouldn’t style inline
While inline styles have a function, they are not the greatest solution to keep your website updated because:
Content is mixed with design
Inline styles appear visually similar to webpage content, making them very difficult to identify. While the style influences just the unique items they’re applied to, this method makes other aspects of design and development, such as consistency, more challenging.
Styling inline mixes your content with your design and this is not good for the long run in terms of maintenance.
Maintenance is more complex
While it can be tough to figure out where a style is when dealing with stylesheets, there are even more places to look for with a combination of inline and external styles. Inline styles create a nightmare for projects with a team and can even have you running circles around yourself trying to figure out where you hide the style on a website you coded months ago.
Once you find it more than just finding the style, you’ll have to alter the style on every element on every page where it’s been put after you’ve found it and changed it. This dramatically increases the cost of website maintenance.
Inline styles limit accessibility
While modern screen readers may be capable of handling inline attributes and tags, older devices may not. Extra characters and content can also alter how a search engine robot views your website, causing your page to perform poorly in terms of search engine optimisation.
Inline styling in HTML limits accessibility for two reasons: first, it fails to separate structure from presentation, and second, it is not possible to override inline styles with CSS.
When you use inline styling in HTML, you write the CSS directly within the HTML code, meaning that all CSS styling is contained within the HTML document rather than stored in a separate CSS file. Having your styling and content in one file can make it difficult for people who are using screen readers or other assistive technologies to understand the content, as they will be unable to differentiate between the structure and presentation of the document.
Additionally, they can be difficult to override because inline styles are applied directly to the HTML elements. This can be a problem if you want to change the styling of an element later on, as you would need to go through and update the HTML code itself.
If you want to create an accessible website, it is best to avoid using inline styling in HTML. Instead, try using CSS to style your content, as this will allow you to keep the structure and presentation of your document separate.
Inline styles can make your page slower
Inline styles increase the size of your pages, which ultimately makes your site slower. If you want each paragraph on your site to look the same, you can do it once in the stylesheet, costing you maybe 10 lines of code. However, if you use inline styles, you’ll have to include them in every paragraph. So if your site is going to have more than 10 paragraphs, inline styling would result in more lines of code, which will result in a slower site.
Inline CSS cant be reused
You can apply a specific styling with stylesheets based on a selector name. That is not the case with inline styling, as it is often wrapped around unique content, making it difficult to copy and paste.
Inline CSS is difficult to read
The cleaner your code, the better for yourself and your team members. Inline styles make HTML files extremely difficult to read and understand, which is why this is our top reason for not using inline styles.
Conclusion
Inline styles can be tempting because they seem like an easy way to quickly change the look of your text. However, there are a lot of good reasons why you should avoid styling text inline. First and foremost, it makes maintenance more complex – if you want to make a style change, you have to go through every instance of that text on your page. Inline styles limit accessibility and can slow down your page loading time. Lastly, and my most important reason not to use inline styles is because inline CSS is difficult to read and understand.
I believe t’s always a good idea to use an external style. While it may seem easier in the short term to make a “quick inline fix”, these quick fixes can add up and when they do, you will regret not taking the time to create a separate stylesheet to make your life as a developer much easier.
Do you agree with us? Let us know Click Here to signup for our Discord – we can’t wait to meet you!
