Inline <Style> Tags VS. Inline CSS Properties

Inline style tags vs. inline css properties

Style rules can be attached using:

• External Files
• In-page Style Tags
• Inline Style Attribute

Generally, I prefer to use linked style sheets because they:

• can be cached by browsers for performance; and
• are a lot easier to maintain for a development perspective.

However, your question is asking specifically about the style tag versus inline styles. Prefer to use the style tag, in this case, because it:

• provides a clear separation of markup from styling;
• produces cleaner HTML markup; and
• is more efficient with selectors to apply rules to multiple elements on a page improving management as well as making your page size smaller.

Inline elements only affect their respective element.

An important difference between the style tag and the inline attribute is specificity. Specificity determines when one style overrides another. Generally, inline styles have a higher specificity.

Read CSS: Specificity Wars for an entertaining look at this subject.

I hope that helps!

HTML inline style vs style attributes (which is better)

Based on this MDN link for HTML Attributes, you should use style as attributes for <div> (or elements that are not <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>) are considered legacy.

From the linked MDN article:

Note: For all other instances, such as <div>, this is a legacy attribute, in which case the CSS width property should be used instead.

JavaScript: different behavior if CSS is inline vs inside head

As you thought, and as others have said, your javascript doesn't recognize the background to white. This is because element.style is used to get or to set the inline css. You can read more here.

What is usually done instead is to set a class to your elements:

<td class="white" onclick="myScript(this)">2</td>

In your css you would define what your classes do, and you will then use Javascript just to toggle between the classes

What's the difference between inline styles vs classes?

There is a simple reason. The point of CSS is to separate the content (HTML) from the presentation (CSS). It's all about accessibility and code reuse.

External CSS vs inline style performance difference?

The performance boost that your friend mentioned is probably too trivial compared to the amount of performance boost (through other factors) using a CSS file.

Using the style attribute, the browser only paints the rule for that particular element, which in this case is the <div> element. This reduces the amount of look up time for the CSS engine to find which elements match the CSS selector (e.g. a.hover or #someContainer li).

However, putting styling at element level would mean that you cannot cache the CSS style rules separately. Usually putting styles in CSS files would allow the caching to be done, thus reducing the amount of load from the server each time you load a page.

Putting style rules at the element level will also make you lose track of what elements are styled what way. It might also backfire the performance boost of painting a particular element where you can repaint multiple elements together. Using CSS files separates the CSS from HTML, and thus allows you to make sure that your styles are correct and it's easier to modify later on.

Therefore if you look at the comparison, you would see that using a CSS file has much more benefit than styling at element level.

Not to forget when you have an external CSS stylesheet file, your browser can cache the file which increases your application efficiency!

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 class="pageheader">  

if the pageheader is defined in a single stylesheet so that if you want to change how a page header looks across the entire site, you change the css in one place.

However, I'll be a heretic and say that in your example, I see no problem. You're targeting the behavior of a single image, which probably has to look right on a single page, so putting the actual css in a stylesheet would probably be overkill.

---

Related Topics