Hi,
I am not sure why the style tags get removed - maybe it is purposely blocked because students messed with the css of the entire page.
If for some reason you can't use the style attribute to make the changes you want (say, if you want to use pseudo selectors), try this method:
Instead of using the <style> or <link> tags, which will be automatically removed once you refresh, use the <script> tag like so:
<script>
// Make a new 'style' element
var style = document.createElement("style");
// Add it to the document head
document.head.appendChild(style);
// Access content
var rules = style.sheet;
// Use addRule to add a styling rule it should look like this:
// rules.addRule('selector:pseudo-selector','property name: property value');
//for example:
rules.addRule('.file:hover','box-shadow: 0px 0px 4px #222222;');
/*is equivalent to
<style>
.file:hover{
box-shadow: 0px 0px 4px #222222;
}
</style>
you don't have to use a pseudo selector if you don't want to, obviously.*/
</script>
Here is a short version of the code without comments:
<script>
var style = document.createElement("style");
document.head.appendChild(style);
style.sheet.addRule('.file:hover','box-shadow: 0px 0px 4px #222222;');
</script>
If you would like to read more about changing styles programmatically, take a look here:
http://pankajparashar.com/posts/modify-pseudo-elements-css/
Please let me know if this helps!