Align content to the grid

Now that the precision grid is complete, the next step is to arrange content within the grid.

You define the grid positioning by creating a series of CSS rules by using the CSS Properties panel in Blend for Visual Studio 2012.

In the CSS Properties panel, the Applied Rules category displays the style rules that exist for the project. If a style rule is highlighted, it indicates that it is the style rule for the selected element.

Selecting the #gameBody ID displays the style rules that apply to the gameBody element in the Applied Style Rules category in the CSS Properties panel

The Applied Rules panel also includes an additional entry labeled Winning Properties. 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 Properties 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.

If a specific rule is selected, Blend will write new properties to that rule.

If the Winning Properties rule is selected, the write target for the new property is determined as follows:

• A property that is already set is written to the same rule where it was originally defined.

• A new property is written to the rule with the associated ID selector. In the case of the gameBody element, this would be #gameBody.

• If there is no ID selector defined, Blend writes the style to the inline rule if the inline rule is accessible for writing.

  Note

  If the element is dynamically generated by JavaScript, Blend cannot store properties for the inline style.

The next step: Position the title.