Introduction

Are you a web developer? I am. I started reverse engineering web pages in 1994 and have since been rather captivated by the platform. It has been wrought with constraints from the start, yet it draws in developers and consumers alike even today, roughly two decades later. My experience with the very elegant and powerful XAML, Microsoft’s own user interface (UI) technology, has occasionally reminded me of the limitations of HTML, but I just keep coming back to the web stack with its open and forgiving syntax and its worldwide reach.

Perhaps you have some experience with web technologies and you’re ready to write an app for the Windows 8 audience. You’ll need to have skills in the three core web technologies: HTML (Hypertext Markup Language) for document structure, CSS (Cascading Style Sheets) for laying out and styling those documents, and JavaScript for implementing the application logic. This is a book about the CSS part and how CSS behaves in Windows 8 app development. Whether you have existing experience with CSS or none at all, you’ll learn about using this ubiquitous styling language.

I’m guessing you’re at least a little bit familiar with Windows 8. This current iteration of Microsoft’s extremely popular Windows operating system is a very interesting release. It’s interesting because it’s dramatically different, and because developers can build apps using a few different technologies including HTML, CSS, and JavaScript—what I like to call the web stack.

With Windows 8, you can create apps using the web stack and they’ll run natively on the operating system. They’ll have access to the device’s sensors and other native implements, and they’ll even be hardware accelerated.

I want to emphasize that I don’t want this to be merely a technical reference book. Of course, there are facts to relay, but what’s more important than the mere transit of facts is the conveyance of a concept. If you are interested only in the definition of the CSS standard or the syntax of the APIs, you could easily look online. In my opinion, however, development is one part education (merely knowing the facts) and one part experience—that is, having run the gamut of successful and unsuccessful implementations enough times to really learn what the online documentation can never relay.

And by the way, development has a third part—inspiration. You really have to love what you’re doing and have a vision for where you’re going with it, and this must generate enough excitement in you to fuel you through the rough patches. If you don’t find yourself staying up late or waking up early to write some code, then you should ask yourself if this is truly your field.

So consider this not only a book about CSS and about Windows 8, but also a book about style. Consider it a book about productivity and beauty and achieving those ends through expressive syntax.

One of the unique offerings of this book over one that is dedicated strictly to the CSS3 standard is that all along the way, I’m going to point out ways that the standard properties and templates will or will not help you with your Windows 8 app. I’ll also point out the Microsoft vendor-specific properties and values that will give you added oomph. You’ll also learn about the guts of the Windows 8 controls provided by the WinJS library and what class names you’ll need to know so that you can properly style them.

Since you have picked up a book about CSS in Windows 8, I imagine there’s a good chance you’re writing an app. Perhaps the app is your brain child and you really hope to see it succeed in the marketplace. If this is the case then that’s great, because the number one criterion for the success of your app is the experience that the user has with it. You’ve probably heard this called UX (user experience). When a user has an experience that thrills him because it saves him time, brings him information or insight, or even just thrills him because it looks like good art, he is more often than not willing to pay real money to you the author, and he’s willing to review and recommend your app highly.

Microsoft made a huge step in implementing the web stack in Windows 8. I think it’s a step in the right direction, and I think they’ve been very smart about how it was done. Microsoft now understands that we’re in a world that loathes all things proprietary and for good reason. We don’t want to be married to one way of solving a problem. We want general skills and lots of options. We don’t want to be married to a single company either, but rather to use technologies that are based on standards resulting from the collaboration of many.

Independent standards are a good thing—a great thing in fact, and that’s why the world loves the web stack. Developers will usually choose an open standard even when the best implementations are somewhat lacking compared to proprietary alternatives.

Microsoft has used the same engine that powers Internet Explorer 10 to power Windows Store apps that are made with the web stack. This means that with little or no exception, if your markup and CSS work in IE10, it will work in your Windows app and vice versa.

When HTML, CSS, or JavaScript have a standard for a feature, it is adopted, and generally, when a feature doesn’t exist, a standard is recommended to W3C. When it is unfeasible for recommended standards to be implemented in a reasonable timeline, extended functionality is added by way of the industry-standard vendor-specific tags, properties, and values. There are always going to be holes in even the most rigorous of standards, and the fact that vendors can backfill these with some of their own properties is excellent. It’s even more excellent that these tags, properties, and values are all prefixed so they can be differentiated from the standards.

For example, in CSS, properties and values begin with a dash (-) followed by a vendor-specific identifier, another dash, and finally the property name. Microsoft’s vendor-specific identifier is ms, so an example of a vendor-specific tag would be ms-grid.

Developers love their tools, and I suppose there’s a good chance you already have your tools of choice installed and running. If you’re new to development, web development, or just looking for some guidance on what to use to create and maintain your CSS, look no further than Visual Studio.

Visual Studio is one of the most powerful and popular IDE’s (Integrated Development Environment) in the world and with good reason. The latest iteration is called Visual Studio 2012 and you can get a free version—Visual Studio Express 2012—for Windows 8 from Microsoft’s website at http://aka.ms/win8downloads. This Express version doesn’t have all of the bells and whistles of the professional version that you would pay for, but it has everything you need to create Windows 8 apps.

Visual Studio offers excellent support for CSS whether you’re working with a web application or a Windows 8 app using HTML/JS. You’ll get IntelliSense support which suggests property names and valid values and you’ll get some other helpful features like a glyph that renders when you specify a CSS color.

And Visual Studio isn’t the only tool in your tool belt. You’ve also got Blend. Blend comes with Visual Studio in the same install whether you have the free Express version of Visual Studio or a paid version.

Both Blend and Visual Studio are app-building machines. You can create an app from end to end in either tool, but Blend is more of a designer-friendly tool and Visual Studio is more of a developer-friendly tool. You can use both of them and you can do so side by side because they both work on the same kind of project files. So if you want some design help, open up Blend and if you want to do some debugging or write some serious code, open Visual Studio.

And now it’s time to dig in to CSS and discover how fun it is to use it for styling your Windows 8 apps.