HTML  /  Tutorial

Blend Tutorial Part 3: Add a Style Sheet—Memory Game

This tutorial provides a walkthrough for creating the basic style sheet you need to start the Memory game project. In addition, this tutorial provides tips for working with existing style sheets, including using tools like the Live DOM, CSS Properties, and Applied Styles panes.

About this series: this tutorial series can help you get started with basic design tasks in Blend 5 for Windows Developer Preview. When you complete all the steps of this tutorial series, you will have created a lightweight, dynamic version of the memory game commonly referred to as “Concentration.” In the game, a number of cards are laid face down. The objective of the game is to turn over pairs of matching cards until all of the matching pairs have been revealed.

Posts in this Series:

Blend Tutorial Part 1: Design Your First Metro Style App with JavaScript, HTML5, CSS
Blend Tutorial Part 2: Create the Project—Memory Game
Blend Tutorial Part 3: Add a Style Sheet—Memory Game [This post.]
Blend Tutorial Part 4: Create a Flexible Layout—Memory Game
Blend Tutorial Part 5: Align Content to The Grid—Memory Game
Blend Tutorial Part 6: Style the Game Board—Memory Game
Blend Tutorial Part 7: Style the Cards—Memory Game
Blend Tutorial Part 8: Add CSS Transitions—Memory Game
Blend Tutorial Part 9: Build and Run Your App—Memory Game

Add a style sheet

Microsoft Windows Developer Preview includes two versions of the default Metro style CSS, one light, the other dark. These two CSS files are automatically included in every new Metro style app project, and a link to ui-dark.css is included in default.html, whether you create it in Microsoft Expression Blend 5 for Windows Developer Preview or Microsoft Visual Studio 11 Express for Windows Developer Preview.

The Metro style CSS files are read-only. If your app requires additional custom styles, the best way to include extra style rules is in one or more custom CSS files.

By default, if no style rule is specified, Expression Blend for Windows Developer Preview creates new style definitions as inline styles. While that may be sufficient for creating quick prototypes, it can be difficult to maintain inline style definitions for your production app. A best practice is to create and maintain your styles by using an external style sheet.

Link an existing style sheet

While it’s possible to create the layout styles completely from scratch, Expression Blend 5 for Windows Developer Preview and Visual Studio 11 Express for Windows Developer Preview include style sheets as part of the Metro style app projects that are optimized for Windows Developer Preview apps.

By default, default.html file includes a link to ui-dark.css, the default Metro style app style sheet. The code you got from the developer does not include the link, so the app does not have styles applied.

Tip: If you do not see the list of images in the lower left of the artboard, click Refresh or close default.html, and then reopen it.

To link an existing style sheet

The default style sheets in Expression Blend for Windows Developer Preview make it easy to apply Metro styling to the app.

  1. In the Styles panel, click the arrow next to Current document (default.html) and select Link a style sheet.
  2. In the Link StyleSheet dialog box, select /winjs/Css/ui-dark.css from the Pick existing style sheet drop-down list.

The artboard now displays the project with the Windows Developer Preview ui-dark.css applied.

Add a new style sheet

In this procedure, you will create a custom style sheet and then use that style sheet to define the layout of the memory app.

To add a new style sheet

  1. In the Styles panel, click the arrow next to Current document (default.html) and select Link a style sheet.
  2. In the Link StyleSheet dialog box, select Add a new style sheet.
  3. In the New Item dialog box, type a name for the file. For this example, you’ll use layout.css. Click OK.

You now have a new style sheet in the Styles panel.

Now that you’ve created the layout.css file, you’ll use the content structure as defined by the developer to create the CSS rules that will define the layout of the app.

You can view the content structure of the app in the Live DOM panel.

Tip: As you progress through this tutorial, you can switch to default.js and see the changes that have been made to the style sheet as you make changes to default.html on the artboard.

Create a style rule

If you select the gameBody element in the Live DOM panel, you’ll see on the artboard that the gameBody div sizes to fit its content, which makes it too big for the game board.

To modify the size of the gameBody div, you’ll add a new style rule for the gameBody element in the new style sheet.

To create a style rule

  • Select the gameBody element in the Live DOM panel. In the CSS Properties panel, click the arrow next to Applied Rules, and select Create style rule from selected element ID: gameBody.

A new style rule is added to the style sheet and the selector for the new style rule is automatically set to #gameBody.

If you switch to layout.css, you can see the new style rule added to the style sheet.

The new style rule is also visible in two other places:

      • In the Styles panel.
      • In the Applied Rules section of the CSS Properties panel.

Define a style rule

For any element selected in the Live DOM panel, the Applied Rules panel shows all style rules that are applied to the element, in the order of their specificity. In this case, the gameBody element has a top rule of inline, and an additional style #gameBody that you just created. The inline rule is more specific than #gameBody. The #gameBody rule is currently selected, indicating that this is the currently active rule in the CSS Properties panel.

The Applied Rules panel also includes an additional entry labeled winning. This is a virtual rule that collects the properties that have the highest order of precedence and specificity across all other rules and their values. The winning rule is a convenient way to quickly adjust properties that are already set in their appropriate places, without having to search for the right rule, or to worry about modifying the wrong rule.

To set initial layout properties

  1. In the Live DOM panel, select gameBody.
  2. In the CSS Properties panel, select #gameBody, and then expand the Sizing category.
  3. Click width and type 100%. Click height and type 100%. Press Enter.

The gameBody element (represented by the blue border) is sized to match the artboard.

The gameBody element is still offset by the implicit top margin of the gameTitle element (an h1 element). To fix the alignment, you need to change the top margin of the h1 element.

To modify the gameTitle element

  1. In the Live DOM panel, select gameTitle.
  2. In the CSS Properties panel, click the arrow next to Applied Rules, and select Create style rule from selected element ID: gameTitle.
  3. In the CSS Properties panel, expand the Layout category.
  4. In the margin-top property, type 0px. In the margin-bottom property, type 0px. Press Enter.

The gameTitle element is now aligned to the top of the artboard.

The next step: Blend Tutorial Part 4: Create a Flexible Layout—Memory Game.