CSS Stylesheet within edX Studio

[Tony]

Hi all,

Currently when creating learning modules inside edX studio we have the option of using the raw html editor. To style in this format we have to use inline CSS.

e.g. <p style="text-align: left;"><span style="font-size: 29pt; font-family: Arial; line-height: 1.5; color: #000000; letter-spacing: -3px;"><b>Welcome to</b> Chapter 1</span></p>

While this works as a short term solution, it definitely doesn't scale. Does anyone know of a work around or xBlock that allows better management of CSS stylesheets within Open edX?

Best Regards,

Tony

[dm...@cloudera.com]

I'm looking for the ability to reference an external stylesheet from the Raw HTML module as well. It seems that you can't place    <link rel="StyleSheet" href="https://foo.css" type="text/css" media="all" /> style reference in the Raw HTML and I don't know how one would inject these in the header either.  If anyone knows of a workaround, please do share.

[Colin Fredericks]

Actually, I haven't had any trouble at all putting style sheets into a Raw HTML component in Studio. I just tell it
<link rel="stylesheet" type="text/css" href="/static/predictionx.css" />
and it works, despite not being in the "head" for the page.

Alternative method: use javascript or JQuery (since it's in edX already) to to inject a style sheet into the "head". Maybe not the best idea, but I'll let you decide that.
https://stackoverflow.com/questions/5680657/adding-css-file-with-jquery

[Susan]

I was trying to add the link with the static library page and it is not working.  It gets erased each time.  Then I realized I was trying this in edge.  Maybe it does not work in studio.edge.  Has anyone got it to work in edge? 

[Colin Fredericks]

Yes, I've gotten it to work in Edge. My guess is that you're using a Text component rather than a Raw HTML component. Text components are actively hostile to scripts and css. I recommend switching to Raw HTML instead.