Introduction:
When thinking of custom applications in SAPUI5, the first thing strikes in mind is which kind of UI view that we are going to implement. Particularly in cases where there is tremendous CSS changes involves, people directly goes to Javascript views. The simple reason is adding CSS in JS views are easy for a beginner compare to XML views.
Purpose:
This blog intended to give as insight of using CSS styles in XML views.
Scenario:
1. Using external Style sheets in XML view
2. Using Local Style class in XML Views
Pre-requisite: Basic Knowledge in SAPUI5 using XML Views.
Implementations:
Scenario 1: Using external Style sheets in XML view-This is a case where tremendous Custom CSS needs to be added to the application.
Step1: Create a SAPUI5 application, choosing XML as view type. The result will have a XML view and controller as below
Step2: Create a folder for CSS, under it create a .css file
Step 3:Go to index.html and include the external style sheet, created in step 2 as in below picture
Step 4: Add styles classes to your .css file (created in step 2) and save it.
.header{
display:block;
width:340px;
padding:15px;
margin:15pxauto;
background-color:rgba(63,166,149,1);
box-shadow:2px3px3px0rgba(63,31,0,.5);
border-radius:10px;
text-align:center;
text-decoration:none;
}
.link{
display:block;
width:150px;
padding:15px;
margin:15pxauto;
background:white;
box-shadow:005px0rgba(63,31,0,.5);
border-radius:10px;
text-align:center;
text-decoration:none;
-webkit-transition:.2s;
transition:.2s;
}
.link:hover{
-webkit-transform:rotate(-10deg)scale(2);
transform:rotate(-10deg)scale(2);
}
.pquote{
float:left;
width:100px;
background:#ddf;
font-weight:bold;
padding:13px;
margin:013px13px0;
border-radius:5px;
}
Step 5: Add UI elements in view, include the above classes
<core:Viewxmlns:core="sap.ui.core"xmlns:mvc="sap.ui.core.mvc"xmlns="sap.m"
controllerName="xml_cust_cs.HOME"xmlns:html="http://www.w3.org/1999/xhtml">
<Pagetitle="SAPUI5 Tutorial">
<content>
<Labelclass="header"text="Working with XML Views:Using External Stylesheets"/>
<VBox>
<HBox>
<Textwidth="100px"
text="SAPUI5 XML Overview"
class="pquote">
</Text>
<Text
width="250px"
text="The XML view type is defined in an XML file. The file name either ends with .view.xml or as an XML string. The file name and the folder structure together specify the name of the view that equals the SAPUI5 module name within the require/declare concept.">
</Text>
</HBox>
<HBox>
<Link
class="link"
text="Click to know more"
href="http://help.sap.com/saphelp_hanaplatform/helpdata/en/91/f292806f4d1014b6dd926db0e91070/content.htm"/>
</HBox>
</VBox>
</content>
</Page>
</core:View>
Step 6: Save the Changes and test the application
Scenario 2: Using Local Style class in XML Views- Case where simple & minimal CSS involved
When there is a need to style only a particular UI element, with local style class, the below one give you the result
<Pagetitle="SAPUI5 Tutorial">
<content>
<html:style>
.myText {
background-color:teal;
color:white;
padding:4px
}
</html:style>
<Label class="myText" text="Working with XML Views:Using Local CSS Class"/>
</content>
</Page>
Feedbacks and suggestions are welcome! 
Regards,
Meganadhan S