Discussion about CSS and inline <STYLE></STYLE>

[Otto]

Hi Andreu,
Can I ask you a question?
Does it have an impact on runtime behavior if I use inline styles instead of CSS?
Andreu, 17:49
styles are usually loaded asynchronously: the browser starts asking for the CSS, and in the meantime, the rest of the page loads

styles are only applied when ready

but if you have a script after a <link rel = "stylesheet">, as from javascript you can check the styles, the script is blocked until the CSS is loaded

And since document.write () (an API that should never have existed) exists, blocking a script means blocking the loading of the rest of the page

that's why you always have to put the <script src = "..."> before the <link rel = "stylesheet" href = "...">

Andreu, 18:11
the same applies to when you change styles from a script

styles are normally only calculated at each frame, and when you change styles from js those changes are saved for later

except if you check that change right after in the script

Maybe you can still remember that I divided my programs into small files and then make a "patch".

It seems more apparent to me that way. So it's more like a class.

Do you think this code could cause problems, and should I leave the <STYLE> </STYLE> in the CSS?

Andreu, 18:15
The main reason for not putting things in <style> elements and using only CSS files is because it is easier to read, edit and handle.

If you have your preprocessing language, I think that doesn't apply to you


Andreu, 18:16
In terms of runtime, it may be that the browser suddenly encounters a <style> that changes the styles from earlier on the page

But if that's not a factor, and you put any <link rel = "stylesheet"> before any script, I think there should be no problems.

One more factor is that the order in which the style blocks appear is relevant: if you move one block before another, the style properties may change.

And that is the same with the order in which the <link> and <style> elements are in the HTML

18:28
To avoid cluttering STYLES, I have a div that has an ID, and this div contains a series of inputs and labels.
So I am JUST trying to format the input within that particular div.
These apps are just small web pages.

Andreu, 18:29
that is not recommended, because if you have many divs with similar styles, you will have a lot of code repetition

but if it works for you ...

18:32
Yes, that is true. First you have to find your personal style.
Even if you understand the interrelationships better, many things change again.

Thanks again

[Otto]

Another post on the same topic
What's the difference between inline styles vs classes?

https://stackoverflow.com/questions/3142710/whats-the-difference-between-inline-styles-vs-classes