Discovering Expression Blend 5 - Styles

16-9-2011 14:14:00

In my previous article I explained the different templates of the Expression Blend 5 preview. Today I would like to walk you through some of the basic of using CSS, or Cascading Style Sheets, in Expression Blend 5. You’ll need CSS to define the look and formatting of your Windows 8 Metro Style application. Expression Blend 5 helps you create your styles in pretty much the same way you are used to when working on Silverlight or WPF applications in Expression Blend 4 and earlier. But not entirely.

Defining a style

For sake of simplicity I’ve created a new solution in Blend using the Blank Application project template. This template comes with three CSS files. Two files are for the default Metro style. One defines a light UI, ui-light.css and one that defines a dark UI, ui-dark.css. Only one of these files is linked in the default.html file, the dark version. I won’t recommend changing these files, but adding you own styles to a new CSS file or adding them to the third CSS file in the project, default.css. Style sheets linked to the currently opened and active file can be found on the Styles panel.

On this panel you can quickly create new style sheets, link existing CSS files or add a style block to you html file. You can also add new style rules to a style sheet. Because there can be a large amount of style rules available a search box is available to help you find your rules very fast. We’ll start by adding a rule to the default.css file by clicking on the “ + “ symbol next at the end of the line.

The style sheet unfolds and a new rule is added to the list. Type #YellowHeader and hit enter. The “ # “ indicates this rule will be applied to an html element with YellowHeader as its ID.

Setting Properties

With the newly added style rule selected have a look at the CSS Properties panel. At the top of panel you’ll find the name of the rule, in this case #YellowHeader. Below that is a search box to find properties. A checkbox for filtering the list is next. Check this to hide all empty properties and show only the ones that are set to certain value. The last part of the CSS Properties panel show a list of all available CSS properties. You can group these per category or show them as a long list ordered by name.

As the name of the style rule implies, we’re going to make a header that is yellow. Navigate to the Text category and click on big box next to color. The Color Editor pops out where you can select a color. Pick yellow. Note that the little square at the end of the line becomes white indicating a value has been set, different from the default.

Apply Rule

Now we’ve got a style rule defined we’ll need to add it an html element. We’re going to apply this to an H1 tag in the html file. Set the designer to split view to be able to edit the raw html by clicking on the little split button on the upper right corner of the design panel.

Add the following between the start and end of the Body tag:

<H1>A Yellow Header</H1>

The element immediately shows up in the designer and the Live DOM panel too.

Select the element in the Live Dom panel or in the designer. And look at the Attributes panel now. This panel contains all attributes for the selected html element. All elements can have an id which uniquely identifies the element. To match this with CSS rule we’ve created earlier name it YellowHeader. Notice that in the list of attributes the id changes too, the little square becomes white and the id also shows up in the Live DOM panel.

Because we’ve created the rule before setting the id, the H1 element immediately turns to yellow.

One last great feature that was added is to quickly find out which elements are affected by a certain style rule. Select the #YellowHeader rule on the Styles panel and watch the border around the selected element in the designer turn green. Notice the element in the Live DOM getting a dark green background also.

Inline Styles

There’s more… In this case we’re going to work the other way around. We’ll start with some html elements and add styles for that. Start by adding the following lines to the body of the html file, right below the H1 tag we added earlier.

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

This creates a list with 3 items.

Select the first LI element. On the CSS Properties panel, have a look at the Applied Rules box. Because the styles are cascading and this stack of applied rules can grow bug, it’s sometimes hard to find out what’s the winning rule. This box helps you with that. When winning is selected the properties show what properties are set. Try selecting the bottom one in this case and note all three items are surrounded with a green border again. This is because the selected rule is applied on all LI tags. Select inline in the Applied Rules box to create an inline style. When this is selected, the changes you make to the properties are placed inside the html tags.

Lets change a couple of properties:

Set background-color to dark blue
Set font-size to 15pt
Set font-weight to bold
Set line-height to 25pt

The item should look something like this now:

CSS Class

Very often CSS uses classes (not .NET classes with code, but CSS classes) to define the looks and formatting for multiple elements at once. Lets convert the previously created inline style to a class and apply it to the other list items. With the second LI element selected go to the Attributes panel and write redItem in the textbox behind class.

Next, switch to the CSS Properties panel. Click on the little tiny triangle in the upper right corner of the Applied Rules and select Create style rule from selected element class… –> redItem.

Change the text-color to red, the line-height to 25pt and the background-color to dark red.

Select the third LI element now and go to the Attributes panel again. Enter redItem in the box behind class and watch the third item turn red too. Try selecting the .redItem rule on the Styles panel too and notice both elements get a green border.

Wrap up

I hope you get the basic idea of how to work with CSS styles in Expression Blend 5. If you haven’t used CSS before, have a look over at www.w3schools.com. You’ll find lots of information there about CSS and CSS3, along with much more information about other web development/design topic. For future tutorials on Expression Blend (and I’m sure many will follow) please subscribe to the rss feed or follow me on Twitter (@Sorskoot).

Expression Blend 5