Learning jQuery

Inline HTML styling (when the style attributes for a particular element are written within the HTML tag) is not something that's considered a best practice when it comes to HTML and CSS, and it's becoming less and less common. You don't often come across inline styling unless a site's code hasn't been touched since the 90s or early 2000s, but it's certainly not unheard of. If you find yourself trying to do a redesign of an older site that contains inline styling within the HTML, you'll almost absolutely find that overriding the inline styling can be a huge pain.

Rather than go through every HTML file to remove inline styling, all of your inline styling woes can be eradicated using a very simple jQuery code snippet, which will completely get rid of all of the style attributes that can be found within your HTML tags. To see how it works, take a look at the code snippet below:

$("*[style]").attr("style", "");

The code snippet above uses jQuery to select every single style attribute (using the * selector in combination with the [style] attribute) and, using the .attr method, removes all of the values from the inline style elements by replacing the text with nothing (thanks to those empty quotation marks).

This is a super simple solution to getting rid of inline styling that can save you tons and tons of time and aggravation. If you're working on a smaller site with less instances of style attributes within the HTML tags, then it might be wiser to just go through and remove them manually, but if you've got a big size with inline styling on every single page, then this is a great, super straightforward, and rather lightweight solution that will easily and quickly remove every single instance of inline style attributes so that the site in question can be updated to look its very best.