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!
Answer from mauris on Stack OverflowExternal CSS vs inline style performance difference? - Stack Overflow
Inline vs Internal vs External
CSS Internal External or Inline Style - Stack Overflow
Inlined CSS vs external for a blog
They say inlined CSS is faster due browser not fetching extra file. I wonder if this is always true?
Only on first load. Once the CSS file is cached, there is no difference as the network is removed from the equation.
Another thought is flexibility: how do you switch inlined CSS for different platforms? Doesn't that require an entire set of pages to be rendered for each supported platform...
You don't switch anything, you use progressive CSS loading as talked about here:
https://csswizardry.com/2018/11/css-and-network-performance/
That is, split the styles into "above the fold" (ATF) and "below the fold" (BTF).
Inline all the styles that govern things ATF i.e. the things that display in the viewport when the page is first loaded.
For everything else hidden BTF (outside of the viewport) use external styles.
That being said, this procedure is different for every site, because what every site displays in the initial viewport is different. Not to mention taking into account different devices. Also there's the niche use case of internal anchor tags i.e. if the user loads a page already scrolled to a certain spot.
And so, while it is a path to ultimate performance in terms of load time, it's actually one of the harder things to implement. Hitting other things like preloading, compression, etc first and getting some "easy wins" are what i'd prioritize.
More on reddit.comVideos
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!
The page will load faster if you use inline styles vs style sheets. In some cases must faster.
When you use a style sheet using href it requires another request to the server, then the parsing of the file after response. With inline styles there is none of that, just direct parsing.
If a client has slow internet then that single request could be very slow leaving the page style-less until the style sheet get delivered. Again, if it were inline there would be no delay at all.
The only reason we use style sheets is to be organised. There are times when they are not needed, so inline styles or in-document style sheets suffice.
So, I'm starting to apply CSS to my HTML and given I'm new to it, I was wondering which one I should go with? Can I use all at once? (For example if I want all but one title to be a certain style, can I use external and then use inline for that one heading). Is it just down to preference? ETC