What Are The Risks Associated with Using Inline Styles

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.

CSP style-src: 'unsafe-inline' - is it worth it?

Allowing inline styles makes you susceptible to a the "other XSS". Cross Site Styling attacks.

The idea here is that any places where a user can inject a style attribute into your document they can modify the appearance of your page any way they want. I'll list a couple potential attacks ordered by increasing severity:

1. They could turn your page pink, and make it look silly.
2. They could modify the text of your page, making it look like you're saying something offensive that could offend your readership audience.
3. They could make user generated content, like a link they provided appear outside of the normal places where people expect to see user content, making it appear official. (eg, replacing a "Login" button on your site with their own link).
4. Using a carefully crafted style rules they could send any information included on the page to external domains and expose or otherwise use that data maliciously against your users.

The fourth example, with the information being leaked to external domains could be entirely prevented in spite of the unsafe-inline provided you ensure your other CSP rules never allow any kind of request to go to a untrusted or wildcard domain. But the first 3 will always be possible if you miss blocking a style attribute somewhere.

Mike West did a good talk on this for CSSConf a few years back for some more examples.

Reasons to use an inline style?

One good reason to use inline styles is if you're using it for HTML emails. For every other opportunity, I think it would be best to use external styles with meaningful classes/ids and inheritance.

Why is inline styling OK with bootstrap?

The first instance is inline styling:

<button style="color: white; border: 5px solid red;"> Press me! </button>

and the second has several classes that are styled in a separate css file:

<button class="btn btn-primary btn-lg d-flex justify-content-center> Press me! </button>

One of the main reasons that it is bad practice to use inline styles is because they can override the styles that exist in the separate CSS file and become hard to track once your CSS becomes more complex. Also, your code becomes more difficult to maintain when you use inline styles. For example, if you had several buttons in your HTML that were each individually styled with inline styles and you decided to change one of the styles you would then have to change the style for each individual button, whereas if you gave them all the same class and styled that class in a separate CSS file, then you can change the color once and it will update all of your buttons.

For example (bad practice):

HTML

<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>

vs (good practice):

HTML

<button id="btn-one" class="button">Click here</button>
<button id="btn-two" class="button">Click here</button>
<button id="btn-three" class="button">Click here</button>
<button id="btn-four" class="button">Click here</button>

CSS

.button {
    background-color: dodgerblue;
}

You can read more about CSS styling here.

Why an inline style for an element cancels a `:hover` for the same?

You are right the but if need to make the color change while hovering the text you must do like this(just Added The Important Tag):

a {
  background-color: #333;
  color: white;
  text-decoration: none;
  padding: 5px;
}

a:hover {
  color: yellow !important;
}

<a href="/" style="color: tomato">Home</a>

---

Related Topics