jQuery check if element has a specific style property defined inline

Here’s a very simple (probably in much need of improvement) plugin I’ve thrown together that will get you the value of an inline style property (and return undefined if that property is not found): ​(function ($) { $.fn.inlineStyle = function (prop) { var styles = this.attr(“style”), value; styles && styles.split(“;”).forEach(function (e) { var style = … Read more

What’s the difference between inline styles vs classes?

First of all: If the HTML is built or generated independent of the overall site design (e.g. shared template code), then add reasonably-named classes and IDs, linked exclusively to external stylesheet(s). Use sufficient elements to allow for arbitrary CSS manipulation. For example, see the CSS Zen Garden. This applies to ALL CMSes, programs, scripts, and … Read more

CSS selector by inline style attribute

The inline style attribute is no different to any other HTML attribute and can be matched with a substring attribute selector: div[style*=”display:block”] It is for this very reason however that it’s extremely fragile. As attribute selectors don’t support regular expressions, you can only perform exact substring matches of the attribute value. For instance, if you … Read more

Using CSS :before and :after pseudo-elements with inline CSS?

You can’t specify inline styles for pseudo-elements. This is because pseudo-elements, like pseudo-classes (see my answer to this other question), are defined in CSS using selectors as abstractions of the document tree that can’t be expressed in HTML. An inline style attribute, on the other hand, is specified within HTML for a particular element. Since … Read more

What’s so bad about in-line CSS?

Having to change 100 lines of code when you want to make the site look different. That may not apply in your example, but if you’re using inline css for things like <div style =”font-size:larger; text-align:center; font-weight:bold”> on each page to denote a page header, it would be a lot easier to maintain as <div … Read more