IONIC Section 4 - 4.11 Using CSS attributes

Click here for more videos available on our youtube channel !

Hello everyone, to control some general settings, like margin around elements or padding inside elements, see the positioning inside a container of a box, we can use Ionic properties. To do this, you can go to the documentation via the "Guide" tab here it is, in the "Layout" part and you go to CSS Utilities and therefore in this table, you will find a lot of examples that are all ready to use provided by Ionic. But I would like to explain something about the layout of CSS classes. The class names, as you can see in this example, will be the same with an important addition that you add after putting a dash, concerning the situation allowing to specify the level of design. For example we have here the class “ion-text-start”, comprising the title of the beginning, and another class “ion-text-end” comprising the title of the end. And so if I go back to the table below, we have the name of the classes indicating the rules of functionality as well as its description. So For example, if I enter “.ion-text-left”, I would have the attribute which will be “text-align: left” and in description the content of the div that this class contains which will align the text to the left. You can always come back to this documentation and look up the details here to learn more about all available classes and their features. This allows us so to incorporate the div, so the div is the contraction of division for the division of content, basically it is a generic flow container. It has no effect on the content or layout as long as it is not formatted in any way using CSS. As a reminder, you are not limited regarding the use of HTML elements, on the contrary, it is an HTML file, so no worries there. So I embed my "div" between my buttons, so right here, where I'm going to put "class="ion-margin-vertical", to add a margin in all directions and we want to position the buttons on the right with "ion-text-right". So now, let's check our result, and we can see that, without writing a line of CSS, we get a pretty nice style from my point of view. This video is coming to an end, I'll give you an appointment for the next one.