When creating an app it very easy to get the CSS from the host web using the chrome control. This will get the corev15.css (or a themed css if applied) from a http handler. (defaultcss.asmx in the famous hive) This will give you the OOTB SharePoint look and feel with all that comes with it. Fonts, background colors, margins, padding etc.

What if you have created that awesome design in SharePoint and you really want it to reflect in the App as well?

There is no common way to get your custom CSS from your master page without hardcoding the css link in your app. (if you have not used a themed CSS which is limited) If you hard code the URL you will lose the styles when you change master page(and CSS). For instance, if you want to add your app to another customer where you have another branding applied you will have to change the URL everytime you re-install your app in order to get the look and feel you want. And also: do you really want to have the whole CSS chunk for lots of SharePoint stuff like the Ribbon, editing page layouts, web parts and yadayda in your app? The app itself often has a contained living space that do not require all of SharePoint CSS junk. What you need is a few rows of CSS as possible: CSS that will define the font, sizes and colors in order to make your app blend in with the rest of the interface.

So how do we make this happen without breaking our necks in the process?

When you create your branding CSS, you also create the app.css(base.css if you will) and ship it together with the rest of your branding package. It has definitions for the fonts, sizes and different artifacts that is necessary for the branding and layout in order to make it unified. The easiest way to do this is to use SASS or LESS when building your css. Then several CSS files can use the same definitions without re-writing lots of code.

Using the branding feature

In your branding feature which activates your master page and sets your CSS, (if you don't use one of these in order to globally deploy and maintain the design you really should), write a custom property into the SPWeb's Property bag, "custom-base-css-URL", which will be set in all webs where your branding is applied.

Pick up the URL in the App

In your app you make a REST call

{appWebUrl}/_api/SP.AppContextSite(@target)/web/allProperties?@target='{hostWebUrl}'"

There you pick up that value "custom-base-css-URL" and add a css link on your app page to that URL. Now your App will have all the base styling set and you will not have to hard code or recreate the design in order to make your App and App Parts look exactly as you want. Of course you can still use your own CSS in the App, and you should, for these elements which are not all SharePointy.

Design & Code for the people !
Over and out