CSS style in HTML-header of HTML template is problem! #17004

gnossing · 2025-03-24T15:14:16Z

gnossing
Mar 24, 2025

I just started a small project with a pi pico W controller. The controller uses Wifi so I can control it from my mobile phone.
I have written a HTML-template page to send commands to the controller. All works fine. The results are placed into the template page.
However, I want to change the width of a slider-control. Therefor I learned, I have to use some CSS like this:
.custom-slider {
width: 300px; /* Adjust width /
height: 10px; / Adjust height */
-webkit-appearance: none;
appearance: none;
background: #ddd;
border-radius: 5px;
}

So I created in the head-section of the HTML-page a style-section:

# HTML-template page
def webpage(sound, LEDstate, vol_value, snel_value):
    html = f"""
        <!DOCTYPE html>
        <html>
        <head>
          <title>Pico Web Server</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <style>
            </style>
        </head>
        <body>
            <h1>TRAIN CONTROL</h1>
            <p>--- Light control ---</p>
        ........

With an empty Style-section the controller works fine. But whenever I fill it with some CSS-code the controller crashes (reinitializing).
Is it possible to add CSS to the template or have I done it the wrong way?
I would be very gratefull when somebody can tell me what's wrong.
Gerd Nossing

Answered by steveh127

Mar 26, 2025

It's certainly possible to add .css code in the header. I insert a substantial block of css code into web pages I generate on the fly.

The html I use is:
<style type="text/css"> css code here </style>

Looks like you need type="text/css".

View full answer

steveh127 · 2025-03-26T14:50:00Z

steveh127
Mar 26, 2025

It's certainly possible to add .css code in the header. I insert a substantial block of css code into web pages I generate on the fly.

The html I use is:
<style type="text/css"> css code here </style>

Looks like you need type="text/css".

3 replies

gnossing Mar 26, 2025
Author

Hello Steve, thank you so much! I have spent many hours on this problem. The sliderwidth is only a simple problem, but in fact I would like to give the user some feedback from his action like a button that changes color when pressed. Your solution is so simple, TOP!
Gerd

gnossing Mar 26, 2025
Author

Hello Steve, sorry for changing my opinion. I just tried it in my webpage and I still get this error: connection reinitialized. I'm down.

# HTML template for the webpage
def webpage(sound, LEDstate, vol_value, snel_value):
    html = f"""
        <!DOCTYPE html>
        <html>
        <head>
            <title>Pico Web Server</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <style type="text/css">.custom-slider {width: 300px; height: 10px}</style>
        </head>
        <body>
            <h2>TRAIN CONTROL</h2>
            <h3>--- Light control ---</h3>
            <table style="width:200px">
                <form action="./light_front">
                    <td><input type="submit" value="  voor  " class="button" /></td>
                </form>
               ...........

The problem is still there.
When I remove the style-line everythings works fine.
I tried different versions: all in 1 line, CSS in a seperate line, more and less parameters, it is all the same.
Maybe you have some other ideas?
Best regards, Gerd Nossing

gnossing Mar 26, 2025
Author

Hello Steve, sorry for changing my opinion. I just tried it in my webpage and I still get this error: connection reinitialized. I'm down.

# HTML template for the webpage
def webpage(sound, LEDstate, vol_value, snel_value):
    html = f"""
        <!DOCTYPE html>
        <html>
        <head>
            <title>Pico Web Server</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <style type="text/css">.custom-slider {width: 300px; height: 10px}</style>
        </head>
        <body>
            <h2>TRAIN CONTROL</h2>
            <h3>--- Light control ---</h3>
            <table style="width:200px">
                <form action="./light_front">
                    <td><input type="submit" value="  voor  " class="button" /></td>
                </form>
               ...........

The problem is still there.
When I remove the style-line everythings works fine.
I tried different versions: all in 1 line, CSS in a seperate line, more and less parameters, it is all the same.
Maybe you have some other ideas?
Best regards, Gerd Nossing

steveh127 · 2025-03-27T08:19:15Z

steveh127
Mar 27, 2025

Sorry, what I showed you works fine with a whole files worth of css for me.

As this isn't really a Micropython issue you might be better asking on an HTML / CSS forum .

0 replies

mathiasflick · 2025-03-27T08:30:33Z

mathiasflick
Mar 27, 2025

Hi Gerd,

your html is an F-string, where the curly braces {} have a special meaning.
The curly braces within your style definition are in conflict with this.
Most likely escaping them by doubling will help {{ ... }}.
Greetings from Cologne, Mathias

1 reply

gnossing Mar 27, 2025
Author

Yes, yes, yes!!! That was the problem! The special meaning of the curly braces in a f-string where the problem.
I directly tried your solution by doubling them and now it works like a charm.
Thank you so much!
Greetings from Rijen (NL), Gerd

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MicroPython

CSS style in HTML-header of HTML template is problem! #17004

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 3 comments 4 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

MicroPython

CSS style in HTML-header of HTML template is problem! #17004

Uh oh!

Uh oh!

gnossing Mar 24, 2025

Replies: 3 comments · 4 replies

Uh oh!

steveh127 Mar 26, 2025

Uh oh!

gnossing Mar 26, 2025 Author

Uh oh!

gnossing Mar 26, 2025 Author

Uh oh!

gnossing Mar 26, 2025 Author

Uh oh!

steveh127 Mar 27, 2025

Uh oh!

mathiasflick Mar 27, 2025

Uh oh!

Uh oh!

gnossing Mar 27, 2025 Author

gnossing
Mar 24, 2025

Replies: 3 comments 4 replies

steveh127
Mar 26, 2025

gnossing Mar 26, 2025
Author

gnossing Mar 26, 2025
Author

gnossing Mar 26, 2025
Author

steveh127
Mar 27, 2025

mathiasflick
Mar 27, 2025

gnossing Mar 27, 2025
Author