Explaining why styling should not be done directly in HTML I recently noticed that &lt;marquee&gt; has been deprecated from html according to this site. From this answer on Stack Overflow, the marquee replacement is made from CSS. The explanation given to the change is that html is about document structure, and that layout and animation and styling etc. should be done from CSS.

This got me thinking:

Would explicitly teaching the difference between setting the style attribute of an html tag, and doing it through CSS useful for increasing the students' understanding of the joining of CSS and HTML?

To narrow it down, I'm looking for examples or explanations of how teaching it explicitly might make it easier for the students to style their webpages. Preferably an explanation.

By "explicitly teaching" what I mean is actually devoting a lesson with the title of "Styling through .CSS", or something similar.

Some context, if it is needed:

The students learn basic web designing: HTML, JavaScript (very basic), JSP and SQL. They learn these for 1 year and at the end of the year they should have a website (for which they receive grades). I am wondering if a lesson entirely about CSS might eventually lead to better looking websites.
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).