<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- stylesheet.qdoc -->
<title>Qt 4.8: Qt Style Sheets</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/functions.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style/superfish.css" />
<link rel="stylesheet" type="text/css" href="style/narrow.css" />
<!--[if IE]>
<meta name="MSSmartTagsPreventParsing" content="true">
<meta http-equiv="imagetoolbar" content="no">
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie6.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie7.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/style_ie8.css">
<![endif]-->
<script src="scripts/superfish.js" type="text/javascript"></script>
<script src="scripts/narrow.js" type="text/javascript"></script>
</head>
<body class="" onload="CheckEmptyAndLoadList();">
<div class="header" id="qtdocheader">
<div class="content">
<div id="nav-logo">
<a href="index.html">Home</a></div>
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
<div id="narrowsearch"></div>
<div id="nav-topright">
<ul>
<li class="nav-topright-home"><a href="http://qt.digia.com/">Qt HOME</a></li>
<li class="nav-topright-dev"><a href="http://qt-project.org/">DEV</a></li>
<li class="nav-topright-doc nav-topright-doc-active"><a href="http://qt-project.org/doc/">
DOC</a></li>
<li class="nav-topright-blog"><a href="http://blog.qt.digia.com/">BLOG</a></li>
</ul>
</div>
<div id="shortCut">
<ul>
<li class="shortCut-topleft-inactive"><span><a href="index.html">Qt 4.8</a></span></li>
<li class="shortCut-topleft-active"><a href="http://qt-project.org/doc/">ALL VERSIONS </a></li>
</ul>
</div>
<ul class="sf-menu" id="narrowmenu">
<li><a href="#">API Lookup</a>
<ul>
<li><a href="classes.html">Class index</a></li>
<li><a href="functions.html">Function index</a></li>
<li><a href="modules.html">Modules</a></li>
<li><a href="namespaces.html">Namespaces</a></li>
<li><a href="qtglobal.html">Global Declarations</a></li>
<li><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</li>
<li><a href="#">Qt Topics</a>
<ul>
<li><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li><a href="supported-platforms.html">Supported Platforms</a></li>
<li><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</li>
<li><a href="#">Examples</a>
<ul>
<li><a href="all-examples.html">Examples</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="demos.html">Demos</a></li>
<li><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="hd">
<span></span>
</div>
<div class="bd group">
<div class="sidebar">
<div class="searchlabel">
Search index:</div>
<div class="search" id="sidebarsearch">
<form id="qtdocsearch" action="" onsubmit="return false;">
<fieldset>
<input type="text" name="searchstring" id="pageType" value="" />
<div id="resultdialog">
<a href="#" id="resultclose">Close</a>
<p id="resultlinks" class="all"><a href="#" id="showallresults">All</a> | <a href="#" id="showapiresults">API</a> | <a href="#" id="showarticleresults">Articles</a> | <a href="#" id="showexampleresults">Examples</a></p>
<p id="searchcount" class="all"><span id="resultcount"></span><span id="apicount"></span><span id="articlecount"></span><span id="examplecount"></span> results:</p>
<ul id="resultlist" class="all">
</ul>
</div>
</fieldset>
</form>
</div>
<div class="box first bottombar" id="lookup">
<h2 title="API Lookup"><span></span>
API Lookup</h2>
<div id="list001" class="list">
<ul id="ul001" >
<li class="defaultLink"><a href="classes.html">Class index</a></li>
<li class="defaultLink"><a href="functions.html">Function index</a></li>
<li class="defaultLink"><a href="modules.html">Modules</a></li>
<li class="defaultLink"><a href="namespaces.html">Namespaces</a></li>
<li class="defaultLink"><a href="qtglobal.html">Global Declarations</a></li>
<li class="defaultLink"><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</div>
</div>
<div class="box bottombar" id="topics">
<h2 title="Qt Topics"><span></span>
Qt Topics</h2>
<div id="list002" class="list">
<ul id="ul002" >
<li class="defaultLink"><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li class="defaultLink"><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li class="defaultLink"><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li class="defaultLink"><a href="supported-platforms.html">Supported Platforms</a></li>
<li class="defaultLink"><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li class="defaultLink"><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</div>
</div>
<div class="box" id="examples">
<h2 title="Examples"><span></span>
Examples</h2>
<div id="list003" class="list">
<ul id="ul003">
<li class="defaultLink"><a href="all-examples.html">Examples</a></li>
<li class="defaultLink"><a href="tutorials.html">Tutorials</a></li>
<li class="defaultLink"><a href="demos.html">Demos</a></li>
<li class="defaultLink"><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</div>
</div>
</div>
<div class="wrap">
<div class="toolbar">
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li>Qt Style Sheets</li>
</ul>
</div>
<div class="toolbuttons toolblock">
<ul>
<li id="smallA" class="t_button">A</li>
<li id="medA" class="t_button active">A</li>
<li id="bigA" class="t_button">A</li>
<li id="print" class="t_button"><a href="javascript:this.print();">
<span>Print</span></a></li>
</ul>
</div>
</div>
<div class="content mainContent">
<link rel="prev" href="style-reference.html" />
<link rel="next" href="stylesheet-syntax.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="style-reference.html">Styles</a>
<a class="nextPage" href="stylesheet-syntax.html">The Style Sheet Syntax</a>
</p><p/>
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#overview">Overview</a></li>
</ul>
</div>
<h1 class="title">Qt Style Sheets</h1>
<span class="subtitle"></span>
<!-- $$$stylesheet.html-description -->
<div class="descr"> <a name="details"></a>
<a name="style-sheet"></a><a name="stylesheet"></a><p>Qt Style Sheets are a powerful mechanism that allows you to customize the appearance of widgets, in addition to what is already possible by subclassing <a href="qstyle.html">QStyle</a>. The concepts, terminology, and syntax of Qt Style Sheets are heavily inspired by HTML <a href="http://www.w3.org/Style/CSS/">Cascading Style Sheets (CSS)</a> but adapted to the world of widgets.</p>
<p>Topics:</p>
<ul>
<li><a href="#overview">Overview</a></li>
<li><a href="stylesheet-syntax.html">The Style Sheet Syntax</a></li>
<li><a href="stylesheet-designer.html">Qt Designer Integration</a></li>
<li><a href="stylesheet-customizing.html">Customizing Qt Widgets Using Style Sheets</a></li>
<li><a href="stylesheet-reference.html">Qt Style Sheets Reference</a></li>
<li><a href="stylesheet-examples.html">Qt Style Sheets Examples</a></li>
</ul>
<a name="overview"></a><a name="overview"></a>
<h2>Overview</h2>
<p>Styles sheets are textual specifications that can be set on the whole application using <a href="qapplication.html#styleSheet-prop">QApplication::setStyleSheet</a>() or on a specific widget (and its children) using <a href="qwidget.html#styleSheet-prop">QWidget::setStyleSheet</a>(). If several style sheets are set at different levels, Qt derives the effective style sheet from all of those that are set. This is called cascading.</p>
<p>For example, the following style sheet specifies that all <a href="qlineedit.html">QLineEdit</a>s should use yellow as their background color, and all <a href="qcheckbox.html">QCheckBox</a>es should use red as the text color:</p>
<pre class="cpp"> QLineEdit { background: yellow }
QCheckBox { color: red }</pre>
<p>For this kind of customization, style sheets are much more powerful than <a href="qpalette.html">QPalette</a>. For example, it might be tempting to set the <a href="qpalette.html#ColorRole-enum">QPalette::Button</a> role to red for a <a href="qpushbutton.html">QPushButton</a> to obtain a red push button. However, this wasn't guaranteed to work for all styles, because style authors are restricted by the different platforms' guidelines and (on Windows XP and Mac OS X) by the native theme engine.</p>
<p>Style sheets let you perform all kinds of customizations that are difficult or impossible to perform using <a href="qpalette.html">QPalette</a> alone. If you want yellow backgrounds for mandatory fields, red text for potentially destructive push buttons, or fancy check boxes, style sheets are the answer.</p>
<p>Style sheets are applied on top of the current <a href="qstyle.html">widget style</a>, meaning that your applications will look as native as possible, but any style sheet constraints will be taken into consideration. Unlike palette fiddling, style sheets offer guarantees: If you set the background color of a <a href="qpushbutton.html">QPushButton</a> to be red, you can be assured that the button will have a red background in all styles, on all platforms. In addition, <a href="designer-manual.html#qt-designer">Qt Designer</a> provides style sheet integration, making it easy to view the effects of a style sheet in different <a href="qstyle.html">widget styles</a>.</p>
<p>In addition, style sheets can be used to provide a distinctive look and feel for your application, without having to subclass <a href="qstyle.html">QStyle</a>. For example, you can specify arbitrary images for radio buttons and check boxes to make them stand out. Using this technique, you can also achieve minor customizations that would normally require subclassing several style classes, such as specifying a <a href="qstyle.html#styleHint">style hint</a>. The <a href="widgets-stylesheet.html">Style Sheet</a> example depicted below defines two distinctive style sheets that you can try out and modify at will.</p>
<table class="generic">
<tr valign="top" class="odd"><td ><img src="images/stylesheet-coffee-xp.png" alt="" /></td><td ><img src="images/stylesheet-pagefold.png" alt="" /></td></tr>
<tr valign="top" class="even"><td >Coffee theme running on Windows XP</td><td >Pagefold theme running on Windows XP</td></tr>
</table>
<table class="generic">
<tr valign="top" class="odd"><td ><img src="images/stylesheet-coffee-cleanlooks.png" alt="" /></td><td ><img src="images/stylesheet-pagefold-mac.png" alt="" /></td></tr>
<tr valign="top" class="even"><td >Coffee theme running on Ubuntu Linux</td><td >Pagefold theme running on Mac OS X</td></tr>
</table>
<p>When a style sheet is active, the <a href="qstyle.html">QStyle</a> returned by <a href="qwidget.html#style">QWidget::style</a>() is a wrapper "style sheet" style, <i>not</i> the platform-specific style. The wrapper style ensures that any active style sheet is respected and otherwise forwards the drawing operations to the underlying, platform-specific style (e.g., <a href="qwindowsxpstyle.html">QWindowsXPStyle</a> on Windows XP).</p>
<p>Since Qt 4.5, Qt style sheets fully supports Mac OS X.</p>
<p><b>Warning:</b> Qt style sheets are currently not supported for custom <a href="qstyle.html">QStyle</a> subclasses. We plan to address this in some future release.</p>
</div>
<!-- @@@stylesheet.html -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="style-reference.html">Styles</a>
<a class="nextPage" href="stylesheet-syntax.html">The Style Sheet Syntax</a>
</p>
</div>
</div>
</div>
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2013 Digia Plc and/or its
subsidiaries. Documentation contributions included herein are the copyrights of
their respective owners.</p>
<br />
<p>
The documentation provided herein is licensed under the terms of the
<a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation
License version 1.3</a> as published by the Free Software Foundation.</p>
<p>
Documentation sources may be obtained from <a href="http://www.qt-project.org">
www.qt-project.org</a>.</p>
<br />
<p>
Digia, Qt and their respective logos are trademarks of Digia Plc
in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. <a title="Privacy Policy"
href="http://en.gitorious.org/privacy_policy/">Privacy Policy</a></p>
</div>
<script src="scripts/functions.js" type="text/javascript"></script>
</body>
</html>
