SAP UI5 Basics Part 2 - CSS

[Former Member]

Welcome to the second part of my blog series about the foundations of SAP UI5. These blogs are targeted at experienced ABAP developers and SAP GUI experts. They should support and motivate you to learn the basics of web development to guarantee an easy switch to SAP UI5 development.
In the last blog we created a simple website in a text editor and learned about the basics of HTML. With these bascis it will be easy for you to expand your knowledge. In the not so distant future you will be able to develop much more complex websites.
One thing that is really important today is design and the standard elements of HTML simply do not look good. And they certainly do not fit your corporate design. The question is: how can we implement our own design to make our website unique? The answer is the topic of this blog post: CSS. CSS stands for Cascading Style Sheets. This technology is used to format the HTML elements.The principal of CSS is rather easy. You define a selector and a declaration. The selector "selects" the HTML elements that will be changed by a layout. You surely remember the paragraph element <p> from the first blog post. A selector for this element could look like this:

p{ font-size: 12px;

color:red; }

The code above defines the following rule: every paragraph of your website has the font size of 12 and font color red. But what can we do, if we want to treat paragraphs differently? This brings classes and IDs onto the table. You can assign IDs to your HTML elements.

<p id=„footer“>This is my favourite footer</p>

As you can see here the paragraph has the unique ID "footer". Now you can adress this paragraph by ist ID. Which format makes sense for a footer? Most of the time small fonts in a light grey color are used.Often times the text is centered and of course it is located at the bottom of the page.
IDs are adressed with a "#". The following rule defines that the footer is small, grey, centered and at the bottom of the website:

#footer{
font-size: 12px;
color:gray;
text-align: center;
padding-top: 90%;

}

The result looks like this:

CSS can be inserted directly into HTML with the <style> tag. It must be part of the header or a reference to an external file. This can be done using the tag <link>:

<link href=„style.css“ rel=„stylesheet“>

You can also define classes. These classes can be assigned to several objects. The attribute "class" of an HTML element can be used here.

<p class=„information“>This text is located in a paragraph which has the class information</p>

Classes are referenced in CSS with a leading ".".

.information{
font-size: 12px;
color:blue;

}

Another possibility to define CSS is inline in the HTML element definition. Use the style attribute here:

<p id=“footer“ style =“color:red“ >Besuchen Sie uns auch auf <a href=“http://www.mindsquare.de“> Mindsquare.de</a></p>

Now a question arises: What happens if you have defined a rule in your CSS file but you overwrite it inline? Then the CSS hierarchy decides:

• universal selector
  • this selector applies to every element
• type selector
  • this selector applies to elements of a certain type, like <p>
• id selector
  • this selector applies to the element #ID
• class selector
  • this selector applies to all elements of the class .CLASS
• descendant selector
  • this selector is like type selector but it is only valid if the element is inside the correct elements

The following rule applies: if all selectors are the same then the last defined rule is valid.

Universal selector:

*{ font-size: 12px; }

Type selector:

h1{ font-size: 18px;

 color:red; }

ID selector:

#footer{
font-size: 12px;
color:gray;
text-align: center;
padding-top: 90%;

}

Class selector:

.adress{
font-size: 9px;
color:gray;

}

Descendant selector:

p a{
font-size: 12px;
color:blue;

}

In this example a <a>-element will only have blue color and font size 12 if it is placed inside a paragraph.
I hope that I could give you a first insight into CSS that maybe piques your curiosity. You can find a really great and detailed reference about both HTML5 and CSS at http://www.w3schools.com.In the next part of this blog series I will present the script language JavaScript and the DOM-tree. You may have noticed already that web development is vastly different compared to ABAP but it is very interesting and can be a lot of fun. You should know these technologies because SAP UI5 is based on them.
As always: if you have any question about the article then post a comment and I will answer as fast as I can.