Unable to Load External CSS Files in Gradio Blocks

[JSchmie]

Describe the bug

Hello Gradio Team,

I'm reaching out because I'm experiencing an issue when trying to load external .css files into a Gradio Blocks interface. While inline CSS styles work correctly, external CSS files do not seem to be applied, regardless of the method I use to reference them.

Notably, this issue did not occur in previous versions of Gradio; the same code used to work as expected before updating to the latest version.

I previously encountered a similar situation in issue #884, where I had trouble displaying an image inside the gr.HTML component. I understand that managing all the nuances of such a versatile tool can be challenging, and I genuinely appreciate your efforts to address these issues.

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

1. Create a Simple Gradio App with External CSS (This Does Not Work):

   import gradio as gr
   
   def create_gradio_interface():
       with gr.Blocks() as demo:
           gr.HTML("""
           <link rel="stylesheet" href="style.css">
           <div class="custom-component">
               <h1>Custom Component</h1>
               <p>This paragraph should be styled by external CSS.</p>
           </div>
           """)
       return demo
   
   if __name__ == "__main__":
       gradio_app = create_gradio_interface()
       gradio_app.launch(allowed_paths=["."])

2. Create an External CSS File (style.css):

   /* style.css */
   .custom-component {
       background-color: lightblue;
       border: 1px solid black;
       padding: 20px;
   }
   .custom-component h1 {
       color: darkblue;
   }

   • The style.css file is located in the same directory as the Python script.

3. Test with Inline CSS (This Works):

   import gradio as gr
   
   def create_gradio_interface():
       with gr.Blocks() as demo:
           gr.HTML("""
           <style>
           .custom-component {
               background-color: lightblue;
               border: 1px solid black;
               padding: 20px;
           }
           .custom-component h1 {
               color: darkblue;
           }
           </style>
           <div class="custom-component">
               <h1>Custom Component</h1>
               <p>This paragraph is styled using inline CSS.</p>
           </div>
           """)
       return demo
   
   if __name__ == "__main__":
       gradio_app = create_gradio_interface()
       gradio_app.launch()

   • Result: When running this version, the styles are applied correctly, confirming that inline CSS within the <style> tags works as expected.

Expected Behavior

• The external CSS file style.css should be loaded, and the styles should be applied to the HTML elements within the Gradio interface.

Actual Behavior

• External CSS styles are not applied when using <link rel="stylesheet" href="style.css">.
• Inline CSS within <style> tags works correctly.
• When inspecting network requests in the browser's developer tools, the CSS file either doesn't appear or returns a 404 error.

Screenshot

1. With External CSS (Styles Not Applied):

3. With Inline CSS (Styles Applied):

Troubleshooting Steps Taken

I have tested the following methods and configurations:

1. Verified File Paths:

   • Ensured that the path specified in the href matches the actual location of style.css.
   • Tried both relative and absolute paths in the href attribute.
   • Attempted using /file=./style.css in the href.

2. Used allowed_paths in launch():

   • Added allowed_paths=["."] to gradio_app.launch().
   • Tried specifying the absolute path to the directory containing style.css in allowed_paths.
   • Despite these attempts, the external CSS file was not loaded.

Logs

No response

System Info

• Gradio Version:

  • Current version where the issue occurs: 4.44.0 with client 1.3.0

  • Previous version where this worked: 4.25.0 with client 0.15.0

• Python Version: 3.12.5

• Operating System: Ubuntu 22.04

• Browser: Google Chrome 129.0.6668.90 and Firefox 128.3.0esr

Severity

Blocking usage of gradio

[jeremy-k3]

Same issue for me. CSS with external file is not loaded with gradio 5

[abidlabs]

Hi folks, in Gradio 5, you should use the css_paths parameter instead. This is one of the breaking changes in Gradio 5, as listed here: #9463

[JSchmie]

@abidlabs, is there a way to directly reference the original .css files rather than merging them all into css_paths? The current setup causes an issue when multiple .css files use the same component names but are meant for different .html files. Instead of each component applying its intended styles, the CSS classes are overridden by the next .css file in css_paths. This makes it difficult to maintain specific styles across different components. Any advice on selectively applying CSS files or perhaps a way to scope the styles to avoid conflicts?

Example

Let's say we have two .css files: style1.css and style2.css, both with a .button class:

/* style1.css */
.button {
    background-color: blue;
    color: white;
}

/* style2.css */
.button {
    background-color: green;
    color: black;
}

Here, we expect page1.html to show a blue button and page2.html to show a green button. However, when both styles are added via css_paths, only the style2.css button style is applied across both pages.

import gradio as gr

with gr.Blocks(css=("style1.css", "style2.css")) as demo:
    gr.HTML("""
      <link rel='stylesheet' href='style1.css'>
      <button class='button'>Button styled with style1.css</button>
      """)
    
    # Button with style2.css applied
    gr.HTML("""
    <link rel='stylesheet' href='style2.css'>
    <button class='button'>Button styled with style2.css</button>
    """)

However, the current setup applies the .button style from style2.css to both buttons, since the styles in css_paths are globally merged. A way to scope each CSS file to its specific component would help retain unique styles for each button.