CSS Properties
CSS properties are all the options you can use to change an element's design inside your WeWeb app.
They're available on the right sidebar, under the styling tab.
Let's go over each of them.
Specific
This section is a shortcut to find the most used CSS properties for a given element. It's different for every element.
Here are the available CSS properties in this section (all elements included):
Text - {lang}
This is where you can bind the text displayed to a variable, typically, when you want to display some text that comes from a plugin or 3rd-party API.
You'll have to bind it for every language that's currently activated on this page.
Typography
This option is useful when you want to standardise text styles in your app. Here, you can select a text type (for example: heading, subtitle, etc) that you created in the typography section of your app.
Size
To set the element text's size (in px, em or rem). Equivalent to CSS' font-size.
Font family
To set the font of the text element. Equivalent to CSS' font-family.
Font weight
To set the weight of the text element (for example: bold, semibold, etc). Equivalent to CSS' font-weight.
Line height
To set the height between two lines of text in the element. Equivalent to CSS' line-height.
Alignment
To align the text right, center, left of justified. Equivalent to CSS' text-justified.
Text color
To set the color of the text. Equivalent to CSS' color.
Text decoration
To set the decoration of the text (for example: underline, overline, etc). Equivalent to CSS' text-decoration.
No-wrap
To prevent the text from wrapping to the next line. Equivalent to CSS' white-space.
Character case
To set the case of the text (for example: uppercase, lowercase, etc). Equivalent to CSS' text-transform.
Text shadows
To add a shadow to the text. Equivalent to CSS' text-shadow.
Letter spacing
To set the space between each letter of the text. Equivalent to CSS' letter-spacing.
Word spacing
To set the space between each word of the text. Equivalent to CSS' word-spacing.
Text background
To set the background color of the text. Equivalent to CSS' background-color.
Image
This is where you can bind an image source, typically, when it comes from an external tool or API. Equivalent to HTML's src.
Fit
To set how the image should be displayed (for example: cover, contain, etc). Equivalent to CSS' object-fit.
Overlay
To set the color of the image overlay. Equivalent to CSS' background-color.
Filters
To apply filters to the image (for example: grayscale, blur, etc). Equivalent to CSS' filter.
Items
This is where you can bind a list of items to be displayed inside a container (like a div, columns, etc).
Direction
To set the direction of the items (for example: horizontal, vertical, etc). Equivalent to CSS' flex-direction.
Rows gap
To set the space between each row of items. Equivalent to CSS' grid-row-gap.
Columns gap
To set the space between each column of items. Equivalent to CSS' grid-column-gap.
Justify
To set how the items should be aligned horizontally (for example: left, center, right, etc). Equivalent to CSS' justify-content.
Alignment
To set how the items should be aligned vertically (for example: top, center, bottom, etc). Equivalent to CSS' align-items.
Reverse order
To reverse the order of the items. Equivalent to CSS' flex-direction.
Push last to the end
To push the last item to the end of the container. Equivalent to CSS' justify-content.
Display type
To set the display type of the items (for example: list, grid, etc). Equivalent to CSS' display.
Presets
Set of predefined display types for columns. Equivalent to CSS' display.
Text
Sanitize
This is for when you bind a text to a data provided by the user, for example a comment you have register in the database.
This will escape special characters, so that you are not vulnerable to XSS attacks.
The option is not active by default because sometimes you want these characters to be interpreted (for example making some part of the text bold with markup).
Sizing
Width
To set the width of the element. Equivalent to CSS' width.
Height
To set the height of the element. Equivalent to CSS' height.
Max-width
To set the maximum width of the element. Equivalent to CSS' max-width.
Min-width
To set the minimum width of the element. Equivalent to CSS' min-width.
Max-height
To set the maximum height of the element. Equivalent to CSS' max-height.
Min-height
To set the minimum height of the element. Equivalent to CSS' min-height.
Spacing
Padding
To set the padding of the element. Equivalent to CSS' padding.
Margin
To set the margin of the element. Equivalent to CSS' margin.
Display
Alignment
To set how the element should be aligned vertically (for example: top, center, bottom, etc). Equivalent to CSS' align-items.
Display
To set if an element should be displayed or not. Equivalent to CSS' display: none.
TIP
This is how you can hide an element on responsive mode or when a condition is met.
Opacity
To set the opacity of the element. Equivalent to CSS' opacity.
Position
To set the position of the element. Equivalent to CSS' position.
Z axis
To set the z-index of the element. Equivalent to CSS' z-index.
Cursor
To set the cursor of the element. Equivalent to CSS' cursor.
Overflow
To set the overflow of the element. Equivalent to CSS' overflow.
Background
Color
To set the background color of the element. Equivalent to CSS' background-color.
Element
To set the background element (like and image or video) of the element. Equivalent to CSS' background.
Borders & Shadows
Borders
To set the borders of the element. Equivalent to CSS' border.
Corner radius
To set the corner radius of the element. Equivalent to CSS' border-radius.
Shadows
To set the shadows of the element. Equivalent to CSS' box-shadow.
Advanced
Transform
To set the transform of the element. Equivalent to CSS' transform.
Transition
To set the transition of the element. Equivalent to CSS' transition.
Perspective
To set the perspective of the element. Equivalent to CSS' perspective.
Custom CSS
Here, you can add custom CSS to the element. Equivalent to CSS' style.