NativeCSS StudioCSS Properties define how you style each view. This page documents the CSS properties available for native iOS and Android views.
Navigation and Action Bars
Navigation bars can be styled like any other view.
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("https://nativecss.com"));
[UIApplication
styleWithCSSString:css
withRemoteHost:[NSURL URLWithString:@"https://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
}