Welcome to the ultimate SAP UI5, BTP, Fiori, CAPM, RAP, ABAP blog! Explore comprehensive tutorials, interview questions, and real-world examples to master SAP development. Elevate your skills in creating stunning UI5 apps, harnessing the power of BTP, and building Fiori applications. Unlock the potential of CAPM, RAP, and ABAP, and learn to integrate seamlessly with the enterprise portal. Whether you're a beginner or an experienced developer, this blog is your go-to resource for SAP expertise!
In this blog, I will try to explain how CSS works in SAPUI5
application. As you must know, CSS is used for presentation purposes, i.e how the elements should be rendered on the
screen. Using CSS, one can control the color of Text, the style of fonts,
spacing, background images, and on and on.
Taking about applying CSS in SAPUI5 application, well it can
be done in the following ways:
·External style sheet
·Internal style sheet
·Using Chrome tools
Watch the video for better understanding:
External Style Sheet
This is the best way to style elements, here a separate .css
file is maintained for style purpose. The entire look an application can be
changed, just by changing a single file. Normally it is namedas style.css. We need to provide the path to
the .css file, most of the time, it is provide in the index.html file, since
the latest release, sap insist on using manifest.json file where the reference
to the external .css file can be given. I will show you both the ways.
Internal Style Sheet is mainly used,for a particular element. Internal style is
defined within the <style>, within the <head> in an html page, i.e
in the index.html page.
Suppose, there isa
scenario to style a particular button then this method is best suited.
<
styletype="text/css">
#buttonId{
color:Blue,font-family: Arial;
font-size:10px;
background-color:Orange;
width:400px;
height:100px;
}
</
style
Using
Chrome Tools
This is the third way of adding style, to a particular section
of the screen. I will show how this is done.
I have made a sample application, in this I want to change the
color of the text “Age Brackets” to blue. To do this, I opened the chrome Dev
tools, and selected the element Age brackets
Select the corresponding CSS code, just by selecting the inspect Element
Now, in the bluish portion of the code seen above, change the
fill field to blue, which is previously black(#333333)
Now, copy this piece of css code and paste in a .css file.
.sapUiABC {
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
color: blue;
}
Using this method, we are able to provide style to the
appropriate element, since we can directly right click the element and inspect
element and change the CSS properties, thereby overriding the default CSS
provided by SAP libraries. There is a new feature from sap, i.e UI5 inspector
which is truly awesome and will help the cause. Maybe in my next blog would
cover that topic too. Till then see you!!
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
We need your help to support www.sapui5tutors.com. Please consider disabling your ad blocker while visiting this website so that we can continue to provide this content to you free of charge.
For details on turning off your ad blocker, or to add www.sapui5tutors.com to your whitelist, please read these
instructions
ConversionConversion EmoticonEmoticon