Explaining why styling should not be done directly in HTML
I like the idea of producing a few style sheets, and having the pupils apply them to their HTML. They can then see the power of having separate style sheets.

Start with a style sheet that you made. Use the new grid layout, have some college styling. But at first get them only creating the html.

They can then start editing the style sheets. They will see that the power of one small change can change every heading, or every paragraph.

I have also in the past, written a HTML file that had a set of buttons at the bottom. These buttons would trigger a different CSS file to be loaded. It was some very simple JavaScript.

To answer should they be kept separate

Keeping style and content separate, is recommended by W3 and many others. It implements separation of concerns and single responsibility. Both very important patterns in software design.

Even better: keep layout, style, structure, and content separate.

One css for layout, another for style, then a template for structure (I use moustache), pull the content from a database, to create json, and programmatically combine it with the template (use a template library). [this section is now about my teaching, but what I do for my websites.]

To answer should you devote a lesson to separate CSS files.

Yes. If it is important to keep these separate, which it is, then you should teach pupils to keep them separate. Save time by not teaching them to mix it in with the HTML (This will save time twice, as you won't have to un-teach it). 



I have only done this with one or two people (not a class).