This article explains why CSS files can not run on their own and explains how teachers can view student's CSS files from the Educator Portal
Last updated - June 30, 2023
We teach and encourage students to use stand-alone “.css” files to organize their styles for their web pages. CSS is a “cascading style sheet;” MDN describes CSS as, “a rule-based language — you define rules specifying groups of styles that should be applied to particular elements or groups of elements on your web page.” CSS is used in conjunction with HTML to apply styles and layout to HTML elements. For this reason, students are not able to run CSS files from the code editor--attempting to do this will produce an error message.
However, our team has created a fix that does allow teachers to view CSS through the Educator Portal by attaching the CSS file to a blank HTML file. Please keep in mind that not all CSS will return feedback; only CSS that provides background images and colors will show. To view a preview of a student's CSS file you will need to login to your Educator Portal, go to the Student Progress section, choose a student, click View code, and click on file preview. This will allow you to view certain aspects of the student's CSS; only CSS that provides background images and colors will show. Keep in mind that CSS can only run "by itself," in this section of the Educator Portal, and not in the code editor section for students--trying to view CSS in that section will produce a "cannot run CSS file," error message, which is correct. Usually, it is not possible to run a CSS file because CSS is used to add styling to HTML. If an HTML file is not attached to CSS, it can not run.
It is not possible to run a CSS file because CSS is used to add styling to HTML. If an HTML file is not attached to CSS, it can not run.