{info:title=About this page} 
This document will only show the basics in a condensed syntax. It is highly recommended that you review the in-depth walkthroughs for more information.

 {panel:title= On This Page| borderStyle=solid| borderColor=#566b30| titleBGColor=#D3E3C4| bgColor=#fff}

{include:FSS Links Panel}

h2. The Basics

h3. Order of CSS Files
The order of class names is anything from FSS goes first and your own custom CSS files go last, for example:


<link href="fluid.reset.css" rel="stylesheet" />
<link href="fluid.layout.css" rel="stylesheet" />
<link href="fluid.text.css" rel="stylesheet" />
<link href="fluid.themes.css" rel="stylesheet" />
<link href="fluid.states.css" rel="stylesheet" />
<link href="fluid.component.name.css" rel="stylesheet" />

<link href="YourStyleSheetGoesHere.css" rel="stylesheet" />


h3. Order of Class names
The order of class names is anything from FSS goes first and your own custom class names goes last, for example:

<div class="fl-container-250 fl-font-size-110 myCustomClass"> </div>

h3. Over-riding FSS data
This is intended as a broad overview of customizing FSS. For a more detailed explanation, please see [Overriding FSS].
To overrride any FSS you should have a selector that at the very least [matches the specificity of the FSS selector|Overriding FSS]. 

An example of over-riding FSS could be when you want to change a columns width:padding:margin values. 

Here is the markup, creating 3 columns:

<div class="fl-col-flex3 myCustomClass">
   <div class="fl-col"> </div>
   <div class="fl-col"> </div>
   <div class="fl-col"> </div>

h2. Layouts

h2. Text

h2. Colors