Static FBML Styles In CSS – The Basics

There are many ‘sytles’ for FBML. A style nothing special; it’s not some secret template, code or magic plugin. A FBML Style is nothing more the CSS styling. CSS Stands for Cascading Style Sheets and is the basis for 99% of all design on the internet.

Practically every single you visit will have some form of CSS on it. CSS is the stuff that looks like:

body {

background: white;

padding: 5px;

}

And stuff like that. What’s great is that you can add styling to your FBML code! The bad news is that not all of it works exactly like you would like and, as usual, Internet Explorer (all versions) have problems with it. Fixing it for Internet Explorer is another article which I’ll eventually write on PiotrKrzyzek.com.

Today I want to tell you how to add CSS to your FBML tab and some basics for using it.

This article isn’t about advanced styling or a full blown tutorial. It’s a starter guide. More on advanced FBML styles in a later post.

There are several important things you have to know. There are two big version of CSS standards out right now: CSS2 and CSS3. Version 3 is brand new and still not a completed standard so it’s barely implemented in any browser. So if you decide to inlcude CSS3 use at your own risk because there is a high probability that most of your fan’s browsers will not be able to display the style correctly, if at all.

Adding CSS2 styles to your FBML code:

FBML is the Facebook Markup Language, but it can easily be integrated with regular HTML. When you are writing your FBML code, all you need to do is add html code around the FBML (or inside it).

For example, if we wanted to add a red border around some text we could do something like this:

<div style=”border: 1px solid red”>My red bordered text</div>

Which would look something like this:

If we want to change the background:

<div style=”background: #DDDDDD”>Gray background text</div>

Which would look something like this:

There are plenty of styles and things you can do with CSS. To learn more about CSS simply type into: “CSS guide” or “CSS tutorial”.

For some fun, here is a style that I use on my opt-in pages using some CSS:

<div style=”background: white; border: 1px dashed red; text-align: center; width: 300px; margin-left: auto; margin-right: auto;”>My Aweber opt-in code would go here background text</div>

Which would look something like this:

Cool huh? Of course don’t forget to add images with styles and the <img> tag:

<div style=”background: white; border: 1px dashed gray; text-align: center; width: 300px; margin-left: auto; margin-right: auto;”>Below is my image!<center><img src=”http://www.quantumfanpages.com/images/quantum_fanpages_book_3d.png” /></center></div>

Which would look something like this:

Below is my image!

Hope that helps! Have fun with using CSS styles in FBML to create some really great fanpages!

Here are some examples of good uses of FBML styles:

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Tagged with: best static fbml styles • css • css2 • css3 • Fanpages • fbml • FBML Styles • Static FBML Styles

Filed under: Fanpages • Static FBML • Static FBML Styles

Like this post? Subscribe to my RSS feed and get loads more!