**Course Title:** PySide6 Application Development **Section Title:** Styling and Theming Applications **Topic:** Customizing widget appearance with stylesheets ### Introduction In the previous topic, we got an introduction to Qt Stylesheets (CSS-like theming). In this topic, we will dive deeper into how to customize widget appearance using stylesheets. We will explore the different selectors, properties, and pseudo-states that can be used to customize widgets. ### Understanding Qt Stylesheets Qt Stylesheets are similar to CSS (Cascading Style Sheets) used in web development. They allow you to customize the appearance of widgets by specifying styles for different pseudo-states and selectors. Here is an example of a simple stylesheet that sets the background color and text color of a QPushButton: ```css QPushButton { background-color: #007bff; color: #ffffff; } QPushButton:hover { background-color: #0069d9; color: #ffffff; } QPushButton:pressed { background-color: #0056b3; color: #ffffff; } ``` In this example, we have used three selectors: * QPushButton: This is a general selector that applies to all QPushButton widgets. * QPushButton:hover: This is a pseudo-state selector that applies when the user hovers over the QPushButton widget. * QPushButton:pressed: This is a pseudo-state selector that applies when the user clicks on the QPushButton widget. ### Selectors Qt Stylesheets support a variety of selectors that can be used to customize widgets. Here are a few: * **Class selectors:** `QLabel { ... }` * **ID selectors:** `#myLabel { ... }` * **Pseudo-state selectors:** `QPushButton:hover { ... }` * **Attribute selectors:** `[flat="false"] { ... }` * **State selectors:** `QPushButton:checked { ... }` ### Pseudo-states Qt Stylesheets support a variety of pseudo-states that can be used to customize widgets based on their state. Here are a few: * **:active:** Applies when the widget is active. * **:inactive:** Applies when the widget is inactive. * **:hover:** Applies when the user hovers over the widget. * **:focus:** Applies when the widget has focus. * **:pressed:** Applies when the user clicks on the widget. * **:checked:** Applies when the widget is checked. * **:unchecked:** Applies when the widget is unchecked. ### Properties Qt Stylesheets support a variety of properties that can be used to customize widgets. Here are a few: * **background-color:** Sets the background color of the widget. * **color:** Sets the text color of the widget. * **font-size:** Sets the font size of the widget. * **border-width:** Sets the border width of the widget. * **border-style:** Sets the border style of the widget. * **border-color:** Sets the border color of the widget. ### Example Here is an example that demonstrates how to use stylesheets to customize a QPushButton widget: ```python import sys from PySide6.QtWidgets import QApplication, QPushButton, QVBoxLayout, QWidget from PySide6.QtGui import QPalette class CustomButton(QPushButton): def __init__(self): super().__init__("Custom Button") self.setStyleSheet("QPushButton { background-color: #007bff; color: #ffffff; } QPushButton:hover { background-color: #0069d9; color: #ffffff; } QPushButton:pressed { background-color: #0056b3; color: #ffffff; }") if __name__ == "__main__": app = QApplication(sys.argv) window = QWidget() layout = QVBoxLayout() button = CustomButton() layout.addWidget(button) window.setLayout(layout) window.show() sys.exit(app.exec()) ``` In this example, we have created a custom QPushButton widget that uses a stylesheet to customize its appearance. ### Practical Takeaways * Use the `setStyleSheet()` method to set a stylesheet for a widget. * Use selectors to target specific widgets or pseudo-states. * Use properties to customize the appearance of widgets. * Experiment with different stylesheets to create unique and visually appealing interfaces. ### Additional Resources * Qt Stylesheet Reference: [https://doc.qt.io/qt-6/stylesheet-reference.html](https://doc.qt.io/qt-6/stylesheet-reference.html) * Qt Stylesheet Examples: [https://doc.qt.io/qt-6/stylesheet-examples.html](https://doc.qt.io/qt-6/stylesheet-examples.html) Do you have any questions about customizing widget appearance with stylesheets?