To customize the appearance of controls in your Windows Store app using JavaScript, you use Cascading Style Sheets (CSS), much like you would for a website. Windows Store apps using JavaScript also support some advanced control styling features, and the Windows Library for JavaScript provides a comprehensive set of styles that makes it easy to give your app the Windows 8 look and feel.
Here we show you how to include the Windows Library for JavaScript style sheet, how to style HTML controls (also called intrinsic controls), how to style Windows Library for JavaScript controls, and how to use the typography classes that Windows Library for JavaScript provides.
Prerequisites
- We assume that you know how to handle events in a Windows Store app built for Windows using JavaScript. To learn the recommended way to handle events, see Quickstart: adding HTML controls and handling events.
- We assume that you can create and use Windows Library for JavaScript controls. To learn how, see Quickstart: adding WinJS controls and styles.
- You must also be familiar with CSS. (For more info about CSS, see HTML/CSS/JavaScript Basics.)
Benefits of using the Windows Library for JavaScript style sheets
The Windows Library for JavaScript style sheets provide:
- A set of styles that automatically give your app the Windows 8 look and feel. By just including the style sheet, your controls will look great and they'll work great with touch-based displays, too.
- Automatic support for high-contrast modes. Our styles were designed with high-contrast in mind, so when your app runs on a device in high-contrast mode, it will display properly.
- Automatic support for other languages. The Windows Library for JavaScript style sheets automatically select the correct font for every language that Windows 8 supports. You can even use multiple languages in the same app and they'll be displayed properly.
- Automatic support for other reading orders. HTML and Windows Library for JavaScript controls, layouts, and styles automatically adjust for languages that have a right-to-left reading direction.
Using the Windows Library for JavaScript style sheets
When you create a new project using Microsoft Visual Studio Express 2012 for Windows 8, it automatically includes all the Windows Library for JavaScript files that you need, including the two Windows Library for JavaScript style sheets. To use the style sheets, you just add a reference to one of the style sheets to the head element of your HTML page, like this:
<!DOCTYPE html> <html> <head> <!-- A WinJS style sheet. --> <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet"> </head> <body> </body> </html>
Windows Library for JavaScript provides two default style sheets that you can use to give your app the Windows 8 look and feel: ui-dark.css and ui-light.css. These style sheets define these styles:
- Base styles
- Intrinsic HTML control styles
Styles for intrinsic HTML controls, such as button.
- Additional intrinsic HTML control classes
CSS classes that you can assign to intrinsic HTML controls to give them a different look and feel. For a complete list of these classes, see CSS classes for HTML controls.
- Windows Library for JavaScript control styles
CSS classes that represent stylable parts of Windows Library for JavaScript controls.
- Typography styles
Styles for typographic elements, such as h1, dd, and p.
- Additional typography classes
CSS classes that you can use to style your text. For example, you can use the win-type-large class to make an element's text large. For a complete list of these typographic classes, see CSS classes for typography.
Including the light or dark style sheet
As described in Quickstart: Adding WinJS controls and styles, when you use Visual Studio Express 2012 for Windows 8 to create a new Windows Store app using JavaScript project, it automatically includes the Windows Library for JavaScript files and references you need.
By default, each HTML page in your project contains a reference to the dark style sheet:
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">
Windows Library for JavaScript also provides a light style sheet. You can include it by replacing the dark style sheet reference with this one:
<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet">
Always include one of these style sheets. For apps that mostly display images or video, we recommend using the dark style sheet, and for apps that contain a lot of text, we recommend using the light style sheet. (If you're using a custom color scheme, use the style sheet that looks best with your app's look and feel.)
Customizing your app's look and feel
If you want to customize the look and feel from your app, you don't have throw out the Windows Library for JavaScript styles and start over from scratch. It's easy to make incremental changes by overriding the styles you want to change.
In fact, it's better to override the Windows Library for JavaScript styles rather than creating your own. When your app runs in high-contrast mode, any changes to the colors in the default styles are automatically overridden by a color scheme that supports high-contrast.
You can override any style in the default style sheet by creating your own style sheet and including it after the Windows Library for JavaScript style sheet:
<!-- The WinJS style sheet. --> <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet"> <!-- Your style sheet for overriding portions of the default style sheet. --> <link href="/css/mystylesheet.css" rel="stylesheet" />
How to specify colors
You can override the Windows Library for JavaScript style sheets, or you can specify your own styles. When specifying your own styles, it's best to use the CSS system colors, because they automatically display correctly when your app is in high-contrast mode. For the list of system colors, see User-defined system colors.
If you don't use the User-defined system colors and instead specify an RGB value, that's ok too, as long as you're overriding an existing Windows Library for JavaScript style. When you override a Windows Library for JavaScript style and the system switches to high contrast mode, custom color information is ignored and a high-contrast mode compatible palette is used instead.
Styling HTML controls
You can style HTML controls (those controls that are part of the HTML5 standard, such as button, textarea, and select) just as you style them in a typical HTML page by using CSS. (To learn about CSS and how it works, see HTML/CSS/JavaScript Basics. )
For example, to style a text input box so that it's 400 pixels wide, you write this CSS:
input[type=text]
{
width: 400px;
}
A typical control has several components, or sub-parts. For example, the text input control in the previous example has two parts: the text value and the clear button.
Windows Store apps using JavaScript provides CSS pseudo-elements that let you style the individual parts of many controls. The pseudo-element for the text input's value is -ms-value and the pseudo-element for the Clear button is -ms-clear.
To style a control part, use the syntax:
element selector::part name { /* Your styles here */ }
For example, to style the input box's Clear button, you create this style:
input[type=text]::-ms-clear
{
border: 2px solid orange
}
You can combine pseudo-element selectors with other selectors so that you target a control with a specific class name or ID.
For example, to style the Clear button of a text input control that uses the "orangeButton" class , you create this style:
input[type=text].orangeButton::-ms-clear
{
border: 2px solid orange
}
For more info about the different ways you can combine pseudo-elements and other selectors, see Understanding CSS selectors.
Here are the available parts for each HTML control.
Using the HTML control classes
The style sheet includes CSS classes that you can assign to intrinsic HTML controls to give them a different look and feel. For example, you can use the win-backbutton class to make a standard button look like a button for navigating backwards.
<button class="win-backbutton"></button>
Using the class makes a button look like this:
Styling Windows Library for JavaScript controls
To style a Windows Library for JavaScript control, you override the Windows Library for JavaScript CSS classes for that control. For example, to style an AppBar, you override the win-appbar class.
The next example creates a style that hides the progress indicator of a ListView.
.win-listView .win-progress {
display: none;
}
For a complete list of the available classes, see WinJS CSS classes. For more info about the classes that a specific control uses, see the reference page for that control.
Some controls, such as ListView and FlipView, also support item templates. Item templates give you a great amount of control over the appearance and content of list items. For more info, see Quickstart: adding a ListView and Quickstart: adding a FlipView.
Using the typography classes
The style sheet also contains CSS classes for typography that you can apply to any element that contains text. For example, you can use the win-title class to give a heading the Windows 8 title style. This example uses the typography classes to create different types of titles.
<p class="win-type-xx-large">win-type-xx-large</p> <p class="win-type-medium">win-type-medium</p> <p class="win-type-xx-small">win-type-xx-small</p>
For a complete list of these typographic classes, see Typographic CSS classes.
Samples
To learn more about styling, check out these samples:
Summary
You learned how to use the Windows Library for JavaScript style sheets, how to style intrinsic and Windows Library for JavaScript controls, and how to use the other CSS classes that Windows Library for JavaScript provides for typography.
Related topics
- HTML/CSS/JavaScript Basics
- Understanding CSS Selectors
- WinJS CSS classes
- CSS classes for HTML controls
- API Reference for Windows Runtime and Windows Library for JavaScript
Build date: 11/29/2012
