How do I customize <h1> header style for a QWidget

Rory_1

I am trying to make the font size of my app scalable. Almost everything is working. I am defining a font size via user input (fontPixelSize) and then combining it with a css QString (cssBase) that has the formatting for all the widgets I am using. Here is the relevant snippet:

G::fontSize = QString::number(fontPixelSize);
css = "QWidget {font-size: " + G::fontSize + "px;}" + cssBase;
this->setStyleSheet(css);

I want to define some html tags such as <h1> like this:

h1 {
    font-size: 150%;
}

How do I set it up so this is the default for QWidget?

Thanks in advance!

JonB

@rory_1
What do you mean by "<h1> for a QWidget"? You can just include the HTML you have in the overall app stylesheet and any <h1> will respect it, I can only think of an <h1> appearing in a QTextEdit.

Rory_1

@jonb Thanks for the reply. The code I posted above is not working in a QLabel with rich text. However the font-size is working, which has been set at the QWidget level and is inherited by QLabel.

SGaist

Hi,

Just in case Qt's stylesheet system is for customising widgets. It's not a full blown CSS engine that you can use to manipulate the html content of QLabel like you would for a website.

JonB

@rory_1
So do you mean you have QLabel("<h1>Title</h1>"), intending it to render the font? Why not just say so?!

As @SGaist has said, QSS is only a subset, you have to read https://doc.qt.io/qt-5/richtext-html-subset.html to see what is supported. And there I see

h1 Level 1 heading Supports the standard block attributes.

so it does not say it will respect font stuff?

Rory_1

@sgaist Thanks. That is what I thought but I was hoping I was wrong. Do you have any advice for how to make html in Widgets (ie QLabel) scalable?

Rory_1

@jonb I have tried referring to an external css file from the html in a QLabel->text.

    h1 {
        font-size: 5px;             /*does not work*/
        color: red;                 /*works*/
    }
    
    h2 {
        color: green;               /*works*/
        font-zize: 50px;            /*does not work*/
    }
    
    body {
      background-color: lightblue;  /*works*/
      font-size: 100px;             /*works*/
      color: blue;                  /*works*/
    }

All attributes except font size seem to work for the header tags. So, something appears to be over-riding the font-size for the header tags in Qt Widgets.

JonB

@rory_1
Have a read of https://stackoverflow.com/questions/932092/default-html-style-for-controls-in-the-qt-library , and the accepted answer.

What you want cannot be done with a QLabel. The QLabel is designed to hold primative text labels - it's HTML support is rather... ropey.

That was 10 years ago. My guess: it still applies ;-)

Rory_1

@jonb Thanks for the link and your help. Much appreciated!!

Solved How do I customize <h1> header style for a QWidget