CSS in FBML can be tricky if you don’t recognize the quirks associated with it. FBML supports <link/> tags for importing external files into your rendered HTML, as well as style attributes and <style/> tags for rendering the CSS inline. One must recognize, however, that Facebook reads these external files and parses them into its own formats.

Facebook treats <link/> tags very similarly to <img/> references in that, on first load of the file, it stores a cached copy of the file on the Facebook servers. The difference is that once the file is cached, that file never gets deleted. Therefore, it might be wise to append a ?version=2.0 or similar parameter if you want to indicate the file was changed. URLs in a <link/> href attribute must be absolute, just like <img/> tags, and must link to the callback URL specified in the application’s installation settings.

Here’s an example <link/> tag in FBML (referring back to our “Hello World” application in Chapter 1):

<link rel="stylesheet" type="text/css" href="http://fbmlessentials.
    staynalive.com/facebook.css?version=1.0" />

CSS within your FBML, whether it’s within <style/> tags or documents linked from <link/> tags, must adhere to certain guidelines. Facebook, when reading id attributes in the DOM from your HTML, rewrites those IDs with the string app, appended by the ID of your application, followed by an underscore, and then the original ID you specified. The following HTML that you send to Facebook through your app:

<div id="foo">bar</div>

gets rendered by Facebook as:

<div id="app0123456789_foo">bar</div>

Therefore, in your CSS, all rules for IDs (those prefixed by #) must have the app0123456789_ prefixed to the ID. Which means:

#foo { ... }

should be:

#app0123456789_foo { ... }

in your CSS <style/> element or file. Take some time to practice these examples. Improper CSS and prefixing with application IDs in the wrong places have been the cause of some of the largest headaches I’ve had when using FBML.

As a reference, see Table 2-1 for a list of the default CSS styles for each of the major HTML elements in Facebook. Every time you insert one of these HTML elements, the associated CSS gets assigned to that HTML element. This is important to remember as you are trying to assign your own CSS to these elements.