How to Use Stylesheets in PyQt5

In this PyQt5 article we want to learn How to Use Stylesheets in PyQt5, so PyQt5 is popular Python library for building graphical user interfaces (GUIs). PyQt5 has a lot of features and functionalities, one of the key features of PyQt5 is its ability to use cascading style sheets (CSS) to customize appearance of GUI elements and widgets. in this article we are going to talk how to use stylesheets in PyQt5 to create attractive and responsive GUIs.

 

 

What is a Stylesheet?

Stylesheets are rules that define how the elements of GUI are rendered. in PyQt5 stylesheets are written in  syntax similar to CSS and they allow developers to apply custom styling to any widget. Stylesheets can be used to modify different properties of widgets such as its background color, font size, borders and margins.

 

 

How to Use Stylesheets in PyQt5 ?

For applying stylesheet to PyQt5 widgets, we need to create QApplication instance. this is the main application object that manages the event loop and provides access to different system resources. after that we creates the widget that we want to style and call the setStyleSheet() method on it, passing in the stylesheet rules as a string. this is is an example of how to apply a stylesheet to QPushButton:

In the above code we have created QPushButton with label Click me, after that we set its stylesheet to a rule that changes its background color to red and its text color to white. and finally we call the show() method to display the button on the screen, and start the event loop with app.exec_().

 

 

 

Run the code and this is the result

How to Use Stylesheets in PyQt5
How to Use Stylesheets in PyQt5

 

 

 

Selectors and Properties

Syntax of stylesheets in PyQt5 is similar to CSS. we can use selectors to target specific widgets, and apply properties to modify their appearance. these are some common selectors and properties that can be used in PyQt5 stylesheets:

Selectors:

  • QWidget: Applies to all widgets
  • QPushButton: Applies to all QPushButton widgets
  • QRadioButton:checked: Applies to all checked radio buttons
  • QSlider::handle: Applies to the handle of QSlider

 

Properties:

  • background-color: Sets the background color of a widget
  • color: Sets the text color of widget
  • font-size: Sets the font size of widget
  • border: Sets the border of widget
  • margin: Sets the margin of widget

 

 

 

Also we can use cascading and inheritance to apply styles to group of widgets. for example we can use following syntax to create style for all QPushButton widgets that have the danger class:

In this case we have used class selector to target all QPushButton widgets that have danger class applied to them. after that we have applied a set of properties to modify their appearance, such as setting the background color to red, text color to white and adding 2-pixel wide border with dark red color.

 

 

 

This is the complete code 

In the above example we have created three QPushButton widgets with different styles. primary button has  blue background color and white text, while secondary button has light gray background color, dark gray border and dark gray text. danger button has red background color and white text.

for applying styles to these buttons we have used setStyleSheet() method and pass in stylesheet string. we have also used setObjectName() method to give each button a unique ID that we can use as selector in the stylesheet.

Note that the secondary and danger buttons extends some properties from the primary button, such as border radius and padding. this is because we are using #primary selector to style primary button, after that we are using .QPushButton selector to apply styles to all QPushButton widgets. also secondary and danger buttons are also QPushButton widgets, they inherit these styles.

and lastly we add buttons to QVBoxLayout and display the window using show() method. when we run the program, we see three buttons with different styles that demonstrate the use of cascading and inheritance in PyQt5 stylesheets.

 

 

 

Run complete code and this is the result

How to Use Stylesheets in PyQt5
How to Use Stylesheets in PyQt5

 

 

 

Learn More on Python GUI

Leave a Comment