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:
|
1 2 3 4 5 6 7 8 |
from PyQt5.QtWidgets import QApplication, QPushButton import sys app = QApplication(sys.argv) button = QPushButton('Click me - GeeksCoders.com') button.setStyleSheet('QPushButton { background-color: red; color: white; font-size:30px; }') button.show() app.exec_() |
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
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:
|
1 2 3 4 5 |
QPushButton.danger { background-color: red; color: white; border: 2px solid darkred; } |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QPushButton app = QApplication([]) window = QWidget() window.setGeometry(100, 100, 300, 200) window.setWindowTitle("GeeksCoders.com") # Create vertical layout for the window layout = QVBoxLayout() # Create button with the "primary" style primary_button = QPushButton("Primary Button") primary_button.setObjectName("primary") primary_button.setStyleSheet(""" QPushButton#primary { background-color: #007bff; color: #fff; border: none; border-radius: 5px; padding: 10px 20px; } """) # Create button with the "secondary" style secondary_button = QPushButton("Secondary Button") secondary_button.setObjectName("secondary") secondary_button.setStyleSheet(""" QPushButton#secondary { background-color: #f8f9fa; color: #6c757d; border: 1px solid #6c757d; border-radius: 5px; padding: 10px 20px; } """) # Create button with the "danger" style danger_button = QPushButton("Danger Button") danger_button.setObjectName("danger") danger_button.setStyleSheet(""" QPushButton#danger { background-color: #dc3545; color: #fff; border: none; border-radius: 5px; padding: 10px 20px; } """) # Add buttons to the layout layout.addWidget(primary_button) layout.addWidget(secondary_button) layout.addWidget(danger_button) # Set layout for the window window.setLayout(layout) # Show window window.show() app.exec_() |
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
Learn More on Python GUI
- How to Create Label in PySide6
- How to Create Button in Python & PySide6
- How to Use Qt Designer with PySide6
- How to Add Icon to PySide6 Window
- How to Load UI in Python PySide6
- How to Create RadioButton in PySide6
- How to Create ComboBox in PySide6
- How to Create CheckBox in Python PySide6
- Responsive Applications with PyQt6 Multithreading
- Event Handling in Python and PyQt6
- How to Use Stylesheets in Python PyQt6