# Using CSS external stylesheets - Is this possible?

**URL:** <https://discuss.openedx.org/t/using-css-external-stylesheets-is-this-possible/5793>\
**Category:** Design\
**Tags:** how-to\
**Created:** [September 17, 2021, 5:46pm UTC](https://discuss.openedx.org/t/using-css-external-stylesheets-is-this-possible/5793 "2021-09-17T17:46:10Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![fotmasta](https://avatars.discourse-cdn.com/v4/letter/f/f6c823/32.png) [@fotmasta](https://discuss.openedx.org/u/fotmasta)\
**Post date:** [September 17, 2021, 5:46pm UTC](https://discuss.openedx.org/t/using-css-external-stylesheets-is-this-possible/5793/1 "2021-09-17T17:46:10Z")

</div>

I’m important a course that originated as static html. I’ve built the course.xml and linked to the source html files.

Here’s where I’m stuck. The formatting is heavily reliant on the css style sheet. I uploaded it to /static within the course, and referenced it in the head of each html file. BUT edx is stripping off the entire section which breaks the css. And this also means I can’t embed the css into the source html files either. I scoured the docs, this site, web searches and found nothing so far.

How can I implement the css stylesheet? (if it’s even possible)

---

<div class="post-metadata">

**Author:** ![farhaanbukhsh](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/farhaanbukhsh/32/1503_2.png) [@farhaanbukhsh](https://discuss.openedx.org/u/farhaanbukhsh)\
**Post date:** [September 29, 2021, 11:12am UTC](https://discuss.openedx.org/t/using-css-external-stylesheets-is-this-possible/5793/2 "2021-09-29T11:12:01Z")

</div>

Hey @fotmasta

Thanks for posting, I have few doubts, what do you really want to customize? A single course or LMS, what are the customizations you are looking for?

Thanks

---

<div class="post-metadata">

**Author:** ![fotmasta](https://avatars.discourse-cdn.com/v4/letter/f/f6c823/32.png) [@fotmasta](https://discuss.openedx.org/u/fotmasta)\
**Post date:** [September 29, 2021, 2:21pm UTC](https://discuss.openedx.org/t/using-css-external-stylesheets-is-this-possible/5793/3 "2021-09-29T14:21:05Z")

</div>

Thank you for replying. I have a single course to customize.  
They want to customize using a CSS style sheet for the headings, indentation, and other formatting.

---

<div class="post-metadata">

**Author:** ![Agrendalath](https://avatars.discourse-cdn.com/v4/letter/a/c68b51/32.png) [@Agrendalath](https://discuss.openedx.org/u/Agrendalath)\
**Post date:** [October 4, 2021, 3:02pm UTC](https://discuss.openedx.org/t/using-css-external-stylesheets-is-this-possible/5793/4 "2021-10-04T15:02:33Z")

</div>

@fotmasta, there is [this OEP](https://open-edx-proposals.readthedocs.io/en/latest/oep-0015-arch-course-wide-js.html) about functionality that would provide course-wide HTML overrides, but its status has been “Provisional” for the last 4 years. At the moment, there are some other ways to achieve this, though:

1. Creating a separate site with a comprehensive theme. To do this, you would need to:

2. This workaround is described [here](https://groups.google.com/g/edx-code/c/idjPWUIx8Ls). Basically, you can embed the styling directly in XBlocks on each course page. For example, you can add the following HTML XBlock to a unit to override the page’s body:

---

<div class="post-metadata">

**Author:** ![fotmasta](https://avatars.discourse-cdn.com/v4/letter/f/f6c823/32.png) [@fotmasta](https://discuss.openedx.org/u/fotmasta)\
**Post date:** [October 4, 2021, 4:07pm UTC](https://discuss.openedx.org/t/using-css-external-stylesheets-is-this-possible/5793/5 "2021-10-04T16:07:25Z")

</div>

That workaround looks pretty good. I might be able to copy the guts of the master css file and insert it into the head of all the html files.

Thank you!

---

<div class="post-metadata">

**Author:** ![Agrendalath](https://avatars.discourse-cdn.com/v4/letter/a/c68b51/32.png) [@Agrendalath](https://discuss.openedx.org/u/Agrendalath)\
**Post date:** [October 8, 2021, 1:03pm UTC](https://discuss.openedx.org/t/using-css-external-stylesheets-is-this-possible/5793/6 "2021-10-08T13:03:34Z")

</div>

@fotmasta, I’ve just found that we have implemented [OEP-15](https://open-edx-proposals.readthedocs.io/en/latest/architectural-decisions/oep-0015-arch-course-wide-js.html#oep-15-course-wide-custom-javascript) and [merged it into the edX master branch](https://github.com/edx/edx-platform/pull/28411) shortly after my last comment. You can now define custom CSS and JS resources in the course advanced settings in Studio.

If you are using Koa, then we have also internally [backported](https://github.com/open-craft/edx-platform/pull/424) this feature there. Feel free to use our [opencraft-release/koa.3](https://github.com/open-craft/edx-platform/tree/opencraft-release/koa.3) branch if you’d like.

---

<div class="post-metadata">

**Author:** ![gxexakis](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/gxexakis/32/4399_2.png) [@gxexakis](https://discuss.openedx.org/u/gxexakis)\
**Post date:** [October 10, 2022, 12:16pm UTC](https://discuss.openedx.org/t/using-css-external-stylesheets-is-this-possible/5793/7 "2022-10-10T12:16:26Z")

</div>

Hi, I have tried to add a custom wide CSS in the advanced settings in the Studio but I don’t see my custom CSS loaded in any page (even after restarting the platform). Do I need to do something else for my changes to take effect (e.g. clear cache)? I could not find any specific instructions anywhere about this topic (most existing articles are about large-scale theming). I use the tutor version of open edx.

---

<div class="post-metadata">

**Author:** ![Agrendalath](https://avatars.discourse-cdn.com/v4/letter/a/c68b51/32.png) [@Agrendalath](https://discuss.openedx.org/u/Agrendalath)\
**Post date:** [October 19, 2022, 10:07am UTC](https://discuss.openedx.org/t/using-css-external-stylesheets-is-this-possible/5793/8 "2022-10-19T10:07:47Z")

</div>

Hi @gxexakis, it seems that the final implementation had a few changes that were not updated in the linked OEP yet. The most important change is that additional resources should be simply provided as a list (without defining “global\_scripts”). You don’t need to restart the platform after adding them in “Advanced Settings”. Clearing the browser’s cache might be helpful in some cases, though.

You can find the list of discrepancies [here](https://github.com/openedx/open-edx-proposals/pull/396/files) or read the updated version of this document [here](https://github.com/openedx/open-edx-proposals/blob/886fd7e09164fce843613138a530a5579cdd6066/oeps/architectural-decisions/oep-0015-arch-course-wide-js.rst).

---

<div class="post-metadata">

**Author:** ![gxexakis](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/gxexakis/32/4399_2.png) [@gxexakis](https://discuss.openedx.org/u/gxexakis)\
**Post date:** [November 18, 2022, 9:45am UTC](https://discuss.openedx.org/t/using-css-external-stylesheets-is-this-possible/5793/9 "2022-11-18T09:45:14Z")

</div>

Thank you for your reply, works well now :)!

---

<div class="post-metadata">

**Author:** ![Roline](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/roline/32/2746_2.png) [@Roline](https://discuss.openedx.org/u/Roline)\
**Post date:** [March 21, 2023, 6:26am UTC](https://discuss.openedx.org/t/using-css-external-stylesheets-is-this-possible/5793/10 "2023-03-21T06:26:41Z")

</div>

Hi, I need some more guidance on loading custom CSS files. I am trying to add a Custom CSS file to my Advance Settings but I do not see the CSS implemented. I am not sure where I am having the issue.

- Is there specifications/ limitations to where the file should be located? I have the custom.css file in a GIT repository.
- I have mostly classes that I want to implement. Is there any limitations to this?

Any help will be appreciated.

---

<div class="post-metadata">

**Author:** ![bergman](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/bergman/32/2897_2.png) [@bergman](https://discuss.openedx.org/u/bergman)\
**Post date:** [July 24, 2023, 4:45pm UTC](https://discuss.openedx.org/t/using-css-external-stylesheets-is-this-possible/5793/11 "2023-07-24T16:45:52Z")

</div>

Am I correct in thinking the feature has nothing to do about Learning MFE (any MFE at all). Just the legacy UI is affected with it?

---

<div class="post-metadata">

**Author:** ![Agrendalath](https://avatars.discourse-cdn.com/v4/letter/a/c68b51/32.png) [@Agrendalath](https://discuss.openedx.org/u/Agrendalath)\
**Post date:** [July 31, 2023, 9:46am UTC](https://discuss.openedx.org/t/using-css-external-stylesheets-is-this-possible/5793/12 "2023-07-31T09:46:42Z")

</div>

@bergman, partially. It is correct that this has nothing to do with the MFEs. However, XBlocks are rendered directly by the LMS, so the styling is applied to them. The learning MFE only displays the XBlocks within an iframe.

---

<div class="post-metadata">

**Author:** ![bergman](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/bergman/32/2897_2.png) [@bergman](https://discuss.openedx.org/u/bergman)\
**Post date:** [August 2, 2023, 9:10am UTC](https://discuss.openedx.org/t/using-css-external-stylesheets-is-this-possible/5793/13 "2023-08-02T09:10:31Z")

</div>

But… Doesn’t xBlock’s iframe render its own fragment html (+css, +js) piece exclusively?  
Those custom CSS/JS are included into parental **legacy** page. They never appear in parental **MFE** page, I think?

---

<div class="post-metadata">

**Author:** ![Agrendalath](https://avatars.discourse-cdn.com/v4/letter/a/c68b51/32.png) [@Agrendalath](https://discuss.openedx.org/u/Agrendalath)\
**Post date:** [August 2, 2023, 2:34pm UTC](https://discuss.openedx.org/t/using-css-external-stylesheets-is-this-possible/5793/14 "2023-08-02T14:34:44Z")

</div>

@bergman, I’m unsure if I understand your question correctly, so I’ll describe the current behavior. To use this feature:

1. Create `test.css` with the following content:

```css
* {
  background: red !important;
}

```

2. In Studio, go to “Content → Files & Uploads” and add the CSS file.
3. Go to “Settings → Advanced Settings” and add your resource to the list (e.g., `["/asset-v1:edX+DemoX+Demo_Course+type@asset+block@test.css"]`).
4. Visit some unit in the Preview; it should look like this:  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/openedx/original/2X/9/9937a2797641f272d5591ad79d83b7a2b5210845.png)
5. Visit the same unit in the Learning MFE; it should look like this:  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/openedx/original/2X/c/c171b1a1d478e4288ca49a2b62e1d9579b9f741b.png)

In the legacy experience, XBlocks were rendered directly on the same page.  
In the Learning MFE, they are still rendered by the LMS, so they must be displayed in an iframe. Therefore, you can apply the course-wide styles to XBlocks, but not to the rest of the page.

---

<div class="post-metadata">

**Author:** ![Southcoastbeach](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/southcoastbeach/32/7335_2.png) [@Southcoastbeach](https://discuss.openedx.org/u/Southcoastbeach)\
**Post date:** [September 9, 2024, 1:00pm UTC](https://discuss.openedx.org/t/using-css-external-stylesheets-is-this-possible/5793/15 "2024-09-09T13:00:28Z")

</div>

@Agrendalath (& Everyone)

Thank you for posting this!

Can we place the CSS file into the 'File & Uploads" of one course and use that as a ‘global CSS’ file host for many courses? So using your example we would add the files web path:

[“**[https://yourname.edx.org](https://yourname.edx.org)**/asset-v1:edX+DemoX+Demo\_Course+type@asset+block@test.css”]

Is this the best solution to have one place for a global CSS file for many courses? OR can we host the CSS file on Github instead? We are looking for the solution most unlikely to go wrong.

We are currently adding a RAW HTML component on every page with a ‘link stylesheet=’ to the Advanced Settings. We have to do this on every page, which isn’t a problem but we just want to know what is the most robust solution before we build out lots of classes.

Thank you for helping!

---

<div class="post-metadata">

**Author:** ![Agrendalath](https://avatars.discourse-cdn.com/v4/letter/a/c68b51/32.png) [@Agrendalath](https://discuss.openedx.org/u/Agrendalath)\
**Post date:** [September 16, 2024, 12:37pm UTC](https://discuss.openedx.org/t/using-css-external-stylesheets-is-this-possible/5793/16 "2024-09-16T12:37:35Z")

</div>

@Southcoastbeach, yes, you can use the full URL to a course asset, as shown in [this example](https://open-edx-proposals.readthedocs.io/en/latest/architectural-decisions/oep-0015-arch-course-wide-js.html#specification).

> Is this the best solution to have one place for a global CSS file for many courses?

It should be good enough for most typical scenarios.

---

<div class="post-metadata">

**Author:** ![wiesener](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/wiesener/32/7522_2.png) [@wiesener](https://discuss.openedx.org/u/wiesener)\
**Post date:** [October 15, 2024, 9:50am UTC](https://discuss.openedx.org/t/using-css-external-stylesheets-is-this-possible/5793/17 "2024-10-15T09:50:39Z")

</div>

Hi,

we tried your procedure with the following css. Then we add the css to each html page of the course with:

```auto
<head>
  <link rel="stylesheet" href="/static/unit.css">
</head>

```

And in the studio it looks as expected. But as soon as we switch to live view the css is somehow overwritten.

```auto
/* Static CSS File (styles.css) */

/* Importing custom font */

  @font-face {
    font-family: 'Futura';
    src: url('Futura_PT_Light.otf') format('opentype') !important;
    font-weight: 300; /* Normal */
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Futura';
    src: url('Futura_PT_Medium.otf') format('opentype') !important;
    font-weight: 450; /* Demi-bold */
    font-style: normal;
  }

  @font-face {
    font-family: 'Futura';
    src: url('fonts_futura/Futura_PT_Demi.otf') format('opentype') !important;
    font-weight: 500; /* Bold */
    font-style: normal;
  }

/* General page styling */
body {
    font-family: 'Futura', sans-serif !important;
    background-color: #efefef !important;
    color: #333 !important;
    margin: 20px !important;
    line-height: 1.6 !important;
  }
  
  /* Header styles */
  body h1, h2, h3 {
    font-family: 'Futura', sans-serif !important;
    color: rgb(0, 0, 0) !important;
  }
  
  body h1 {
    color: rgb(57, 164, 146) !important;
    font-size: 3rem !important;
    margin-bottom: 20px !important;
    font-weight: 500 !important;
  }
  
  body h2 {
    font-size: 2.25rem !important;
    margin-top: 20px !important;
    font-weight: 500 !important;
  }
  
  body h3 {
    font-size: 1.8rem !important;
    margin-top: 15px !important;
    font-weight: 500 !important;
  }
  
  /* Paragraph and list styles */
  body p, li {
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
  }
  

  /* List styling */
  body ul {
    margin-left: 20px !important;
    padding-left: 0 !important;
  }
  
  /* Link styling */
  a {
    color: #0056b3 !important;
    text-decoration: none !important;
  }
  
  a:hover {
    text-decoration: underline !important;
  }
  
  /* Section styling */
  .section {
    margin-bottom: 30px !important;
  }
  
  
  /* Style the image container */
  .image-container {
    position: relative !important;
    display: inline-block !important;
  }
  
  /* Hoverable region styles */
  .hover-region {
    position: absolute !important;
    border: 2px solid transparent !important; /* Invisible border */
    cursor: pointer !important;
    transition: border-color 0.3s !important; /* Smooth transition for highlighting */
  }
  
  /* Highlighted region */
  .highlight {
    border-color: #f00; /* Red border when highlighted */
  }
  
  /* Explanation container */
  .explanation {
    background-color: #f0f0f0 !important;
    padding: 10px !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    border: 1px solid #888 !important;
    transition: background-color 0.3s, box-shadow 0.3s ease-in-out !important; /* Smooth transition for background and shadow */
  }
  
  /* Highlight the explanation on hover */
  .explanation:hover {
    background-color: rgb(57, 164, 146) !important; /* Highlight color */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* Subtle shadow effect */
  }
  
  /* Headings inside explanations */
  .explanation h4 {
    font-size: 1.25rem !important;
    margin-bottom: 10px !important;
    color: #444 !important; /* Color for headings */
  }
  
  /* Paragraph styling inside explanations */
  .explanation p {
    font-size: 1rem !important;
    color: #555 !important; /* Color for paragraphs */
  }
  

```