Skip to main content

Developing an Application

 

OutSystems

Define and Use CSS Styles

When designing your application, you can use CSS to describe how HTML elements are displayed on the screen. This way, you can control the layout of multiple HTML elements at the same time, which saves work and time. 

To define and apply a style to an element on the screen, do the following:

  1. On the toolbar of the Main Editor, click on CSS.png to open the CSS Editor;

  2. Select the tab with the application name and define the style to make it available to the whole application. Alternatively, select the tab with the name of the currently selected screen or block to narrow the scope of the style to that screen or block.

  3. To apply the style to an element, select the element on the screen or block and define the style in the drop-down list next to CSS.png.

Example

In GoOutWeb, a web application to find, review and rate places, we want to display circular profile photos of the end-users.

To do this, we will create a CSS style and apply it to the images that display the profile photo:

  1. In the Main Editor Toolbar, click on CSS.png to open the CSS Editor;

  2. Select the tab with the name of the application and define the style that will make the profile photos appear circular.

    Define and Use CSS Styles - Define Style

  3. Open the Web block ProfilePicture and apply the new style to the image that displays the profile photo, as well as the default static image that appears when the end-user does not have a profile photo.

    Define and Use CSS Styles - Assign Style to Element

  • Was this article helpful?