6 out of 9 rated this helpful - Rate this topic

Define a style rule

For any element selected in the Live DOM panel, the Applied Style 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 Style, and an additional style #gameBody that you just created. The Inline Style 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.

CSS Properties cascade

To set the 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.

    CSS Properties panel - sizing
  4. Expand the Background category, and then click Image Blend image icon. Click the drop-down list under the Image button and select 1366x768.png.

    Add background-image

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

Tutorial app after first style is applied

The next step: Create a flexible layout (HTML).

© 2013 Microsoft. All rights reserved.