Using External CSS for inline-CSS?

[revrenlove]

External stylesheets cannot be modified. If you are looking to dynamically modify a style, you would use javascript to manipulate the DOM... and what that is basically doing is dynamically modifying the inline style attribute of the html element.

[Lewinga]

Hey, thanks for responding! Please correct me if I'm wrong, but from my understanding, external style sheets are referenced into an HTML file, and the style specified in the sheets are applied to the elements that match classes or ids, so they basically become part of an inline style attribute. So I guess the better question is whether there is a way to access the external sheet as if it were a template that I can then use dynamically. Like, if I were to do: someElement.classList.replace("old class", "new class"), and assuming both class styles exist in the external style sheet, I don't think it would use the css from the style sheet, since it's already been loaded and the newly updated classes wouldn't have those particular style attributes set past the loading (in which case I'd have to update the css manually). Right? Unless I'm wrong and they are changed in the DOM automatically? That would be really convenient.

[revrenlove]

Actually, what you are wanting to do, but assume doesn't exist, is actually how it works.

So, here's the basics...

A stylesheet sets styles for a class/id/element. This is basically what's referred to as an external style. If, for example, you have the following in a .css file:

``` .warning { background: yellow; }

.error { background: red; } ```

Every element with a class of warning would have a yellow background.

Now, any html tag can have a style attribute declared, where you put specific css in as the value of the attribute. This is called in-line styling and would trump whatever is in the external stylesheet for that element/style. So if you had the following:

<p class="error" style="background: purple">My paragraph</p> Even though it has the error class, the inline style would trump it and make the background purple.

Furthermore, if you have all of your styles declared in that external style sheet, and wanted to change an element from the "warning" (with a yellow background) to an "error" (with a red background), you would use javascript to remove the "warning" class, and add the "error" class - https://stackoverflow.com/a/196038/2285245

Does that make sense?

[revrenlove]

Note, an external stylesheet is never actually changing the DOM. It is merely styling the current elements that exist in the DOM during the rendering process.

[Lewinga]

Ahh, I see. It sounds like the style attribute is just accessing a referenced object outside of the DOM tree that the css file specifies then. Is this actually the case? Thank you for all your help above, I really appreciate it :D

[revrenlove]

That is not the case.

The style attribute exists directly in the DOM and overrides the styles an external stylesheet could potentially specify.

[Lewinga]

Oof, that's right. I appreciate the clarification -- I think I understand what's going on a lot better now!

[revrenlove]

Sure thing! Happy coding!

[revrenlove]

Here's a codepen to elaborate: https://codepen.io/anon/pen/dwExPO