Legacy NCSS Properties

This documentation is for an old version of nativeCSS. For the latest versions of nativeCSS see the latest ncss properties documentation

CSS Properties define how you style each view. This page documents the CSS properties available for native iOS and Android views.


Navigation bars can be styled like any other view.

Get started with our sample app.


Download iOS Navigation Sample App

To simplify cross platform development, navbar matches both iOS UINavigationBars and Android ActionBars.



7


navbar{ background-image:url('texture.png') }

iOS7 Status Bar

On iOS7, the status bar is styled like the navigation bar:

For nativeCSS to automatically select the appropriate status bar, you’ll need to set View controller-based status bar appearance to NO in your Info.plist:

Navigation Title

Styling the title view is slightly different on iOS and Android.


6


7


navbar, actionbar label{ color:red; font-family:'Times New Roman'; font-size:10px }

Navigation Buttons

Styling the navigation button is also slightly different. For iOS use the nth-of-type selector and for Android use the menu view id.


6


7


navbar{ background-image:url('texture.png') } navbar button:nth-of-type(2), navbar #menu_settings{ background:-linear-gradient(#98ba40, #a6c250 35%, #618926) }

iOS Back Buttons



navbar #backButton{ background: url('left.png') 2px middle 10px 15px no-repeat; }


navbar #backButton{ background: url('left.png') 2px middle 10px 15px no-repeat,linear-gradient(top,hsl(106,13,74),hsl(124,50,50) 50%,hsl(125,83,39) 50%,hsl(129,85,33)); border:1px solid rgb(43,43,43); border-radius:5px; }

Tables and Lists


6


#table{ background-color:blue } #table > view{ background-color:blue } #table > view:nth-child(odd){ background-color:red } Styling tables requires a code change

For iOS, find your table datasource, and add our import

#import "UITableViewCell+NativeCSS.h"

Next add this line to tableView:cellForRowAtIndexPath:indexPath:

[cell refreshCSSStylingWithTableView:tableView cellForRowAtIndexPath:indexPath];

For Android, find your list adapter, and add this import

import com.nativecss.NativeCSS;

Next add this line to getView(int position, View convertView, ViewGroup parent)

NativeCSS.refreshCSSStyling(position,convertView,parent);

Learn more about styling tables in our tutorials

Tab Bars


6

7


tabbar{ background:-linear-gradient(#98ba40, #a6c250 35%, #618926) }


tabbarbutton > label{ color:white; font-family:courier; width:100%; text-align:center }


tabbar{ background:linear-gradient(grey,white) } label{ color:black; font-family:courier; width:100%; text-align:center } tabbarbutton{ background:url('star_w.png') no-repeat center 2px 25px 25px } tabbarbutton:nth-child(2){ background:url('person.png') } tabbarbutton:nth-child(3){ background:url('settings.png') }

Segmented Controls

Style UISegmentedControls with both a default state and an active state:



6

7


UISegmentedControl{ background: white,linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0)); border-radius:10px; border:1px solid rgb(167,167,167) } UISegmentedControl:active{ background: red,linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.3) 80%,rgba(0,0,0,0.6)) }

6

7


UISegmentedControl{ background: white,linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0)); border-radius:10px; border:1px solid rgb(167,167,167) } UISegmentedControl:active{ background: url('wood.jpg') }

Animations


6

7


@keyframes shrink{ to { margin:auto; width:0% } } img{ animation-name: shrink; animation-duration:0.3s }

6

7


@keyframes fade{ from { opacity:1 } to { opacity:0 } } img{ animation-name: fade; animation-duration:0.3s }
  • margin
  • left
  • right
  • top
  • bottom
  • width
  • height
  • opacity

Filters

Style any view with iOS7 standard frosting.



toolbar{filter:frosting}

Or add a background color tint:



toolbar{ filter:frosting; background:rgba(196,233,251,0.8) }

Background

Background is a shorthand for all background styling properties. For more information on background images see background-image below.


6


7


img{ background: grey url('clock.png') center middle no-repeat }

6


7


img{ background: url('clock.png') center middle no-repeat, url('texture.png') }

6


7


img{ background: url('clock.png') center middle no-repeat, linear-gradient(rgba(0,0,0,0.9),transparent), lightgrey }

6


7


img{ background: url('clock.png') center middle no-repeat, linear-gradient(rgba(0,0,0,0.9),transparent), url('texture.png') }

Loading from iOS asset bundles


6

7


img{ background: grey url('Media.bundle/clock.png') center middle no-repeat }

background-color


6


7


label{ background-color:yellow }

6


7


label{ background-color:#00ff00 }

6


7


label{ background-color:rgb(255,0,255) }

6


7


label{ background-color:rgba(255,0,255,0.5) }

6


7


label#label{ background-color:hsl(180,50%,75%) }

6


7


label#label{ background-color:hsla(180,65%,65%,0.2) }

background-image, background-position, background-size, background-repeat

Background images can be loaded from inside the app or remotely from the internet.


6


7


#shadedView{ background-image: url(tick.png); background-position:0px 0px; background-size:20px 20px; background-repeat:no-repeat }

The image tick.png needs to be in the app for this to work. In iOS the image just need to be included in the app, in android this means specifically the drawable folder for images and assets folder for fonts.

Remote Images


6


7


label#label{ background-image:url('http://localhost/assets/tests/icons/clock.png'); background-position:80px 0px; background-size:20px 20px; background-repeat:no-repeat }

Images downloaded from the internet can also be loaded using a relative path.


6


7


label#label{ background-image:url('/assets/tests/icons/clock.png'); background-position:80px 0px; background-size:20px 20px; background-repeat:no-repeat }

You’ll also need to tell nativeCSS what remote host URL to use:

NativeCSS.styleWithCSS(css, new URL("http://nativecss.com")); [UIApplication styleWithCSSString:css withRemoteHost:[NSURL URLWithString:@"http://nativecss.com"] ];

Border


6


7


imageview{ border:5px solid silver } Note: only solid border style is supported

border-bottom


6


7


imageview{ border:5px solid silver; border-bottom:10px solid gold }

border-bottom-color, border-bottom-width


6


7


imageview{ border:5px solid silver; border-bottom-color:gold; border-bottom-width:10px }

border-left


6


7


imageview{ border:5px solid silver; border-left:10px solid gold }

border-left-color,border-left-width


6


7


imageview{ border:5px solid silver; border-left-color:gold; border-left-width:10px }

border-right


6


7


imageview{ border:5px solid silver; border-right:10px solid gold }

border-right-color,border-right-width


6


7


imageview{ border:5px solid silver; border-right-color:gold; border-right-width:10px }

border-top


6


7


imageview{ border:5px solid silver; border-top:10px solid gold }

border-top-color,border-top-width


6


7


imageview{ border:5px solid silver; border-top-color:gold; border-top-width:10px }

border-radius


6


7


imageview{border-radius:10px}

box-shadow


6


7


imageview{ box-shadow: 10px 10px 5px #888888 }

6


7


imageview{ box-shadow: -10px 10px 5px 5px #888888 } Note: shadow radius is fixed due to restrictions in iOS.

Layout

Autolayout in iOS

Autolayout is supported, but nativeCSS removes any conflicting contraints. This may lead to styling errors where both Autolayout and CSS styling are intertwined, where the CSS Styling will always have highest priority.

Linear Layout in Android

Android’s LinearLayout is only partially supported. For advanced styling, we’d recommend using Android’s FrameLayouts.

height


6


7


imageview{height:40px}

6


7


imageview{height:30%}

width


6


7


imageview{width:40px}

6


7


imageview{width:30%}

Font

font-family


6


7


label{ font-family:Times New Roman }

Note: Android and iOS default fonts are different. We recommend using font-face for cross platform development.


6


7


@font-face{ font-family: SourceSans; src: url('SourceSansPro-Bold.otf'); font-weight:bold } #label{ font-family:"SourceSans"; font-style:normal; font-weight:bold }

6


7


@font-face{ font-family: SourceSans; src: url('http://localhost/assets/fonts/SourceSansPro-Bold.otf'); font-weight:bold } #label{ font-family:"SourceSans"; font-style:normal; font-weight:bold }

font-size


6


7


label{font-size:12px}

6


7


label{font-size:12pt}

Note: only pixels are supported, all other units are treated as the pixel value.

font-style


6


7


label{font-style:bold}

Note: Android and iOS default fonts are different. We recommend adding any required font files to the app.

Margin


6


7


#subViewLabel{ margin:auto; width:120px }

This is correct, but our tests find it hard to talk about it.

margin-left


6


7


label{ border:5px solid silver; margin-left:10px }

margin-top


6


7


label{ border:5px solid silver; margin-top:10px }

Padding


6


7


label{ border:5px solid silver; padding:10px }

padding-bottom


6


7


label{ border:5px solid silver; padding-bottom:10px }

padding-left


6


7


label{ border:5px solid silver; padding-left:10px }

padding-right


6


7


label{ border:5px solid silver; padding-right:10px }

padding-top


6


7


label{ border:5px solid silver; padding-top:10px }

Text

color


6


7


label{color:gold}

text-align


6


7


label{text-align:right}

text-transform


6


7


label{ text-transform:uppercase }

6


7


label{ text-transform:lowercase }

6


7


label{ text-transform:capitalize }

text-overflow


6


7


label{ text:lots of words in label ipsum lorem; text-overflow: ellipsis }

6


7


label{ text:lots of words in label ipsum lorem; text-overflow: clip }

text-shadow


6


7


label{ text-shadow:1px 1px grey }

6


7


label{ text-shadow:-1px -1px black }

6


7


label{ text-shadow:-1px 1px 1 black }

The above tables are based on the fine work of w3schools.com


Cross Platform

Sometimes you only need to style an Android or iOS view, without changing the other.

Simply prefix any properties with -ios- or -android- to style either iOS or Android only.


6


7


img{ -ios-border:2px solid gold; -android-border:2px solid silver; padding:5px }

OS Versions

iOS7 has a radically different UI to previous iOS versions and your app style should reflect this.

Simply prefix any properties with -min-ios7- to target iOS 7.0 and above or -max-ios6- for earlier iOS versions.


6


7


button{ -min-ios7-background:gold; -max-ios6-background:silver; -min-android4.2-background:gold; -max-android4.2-background:silver }