13 CSS properties to know & understand in Webflow

In this short guide, we will introduce you to 13 important CSS properties (to know and understand) to develop a website.

PS: The list is subjective and not exhaustive because there are many different properties (with different values)

1. Property "display" : Manage the display

The CSS property"display" allows you to arrange the display of elements on a website. There are several values for this type of style:

• Block: The elements are displayed one below the other and take the maximum possible width
• Flex: We can position our elements on a vertical or horizontal axis, align them and justify
• Grid: The elements are placed in rows and columns (in a grid)
• Inline: The width and height of the elements is defined by the size of the text and the height between the texts
• Inline-block: Same as inline except that we can define a width and a height
• None: The elements are not visible

By default, in Webflow (in most cases), when a new element is inserted, it takes a display property with a value of "Block".

2. Margin" and "padding" properties : Manage the spacing

The"margin" property allows you to manage the (outer) margins between the elements. For "padding", it is exactly the same but for the inner margins of the elements.

The values of these CSS properties are numbers in px, %, ch, em, rem, vw, vh and auto (only for "margin").

We can apply margins only on some sides with"margin-top","margin-bottom","margin-left" and "margin-right". Same for the "padding" with"padding-top","padding-bottom", "padding-left" and "padding-right".

3. Property "width" & "height" : Manage the sizes

The"width" property manages the width of the elements while"height" manages the height.

Here too we can give values in rem, px, ch, em, vw, vh or auto.

With the properties"min-width" and"min-height" we can define minimum sizes and with"max-width" and"max-height" maximum sizes.

4. Property "position" : Manage the position of the elements

Change the position of your elements on your page with this CSS property.

The different values you can apply to"position" are: static, relative, absolute, fixed, sticky.

Learn more about the different position types in Webflow!

5. Property "font-weight" : Manage the weight of the fonts

"font-weight" allows you to define the weight / thickness of your fonts.

In Webflow, you can define weights such as normal, medium, bold, semibold, light, etc. depending on the font you use.

In CSS, you can also use these keywords or use numerical values (for example:"700" for bold).

6. Property "color" : Manage the color of the texts

"color" allows to define the color of a text. The value can be the name of a color (for example"yellow" for yellow), a hexadecimal value(HEX) or an RGB value.

7. Property "font-size" : Manage the font size

The"font-size" property allows you to modify the size of your fonts. In Webflow, you can define sizes in rem, px, ch, vh, vw, %, etc.

Why use REM instead of Pixels on your website!

8. Property "text-align" : Manage the alignment of texts

With"text-align" you can define the alignment of texts in a block or for a text element. Natively in Webflow, you have 4 possibilities of alignment(text-align: left; text-align: right; text-align: center; text-align: justify).

With some customization, you can add other values like text-align: justify-all; text-align: start; text-align: end; text-align: match-parent; etc.

9. Property "line-height" : Manage the height between lines

This CSS property offers the possibility to customize the size (height) of the separation line between text elements.

The values (in Webflow) can be REM, PX, EM, VW, VH, % or without unit. When there is no unit, the value is a multiplier of the font size. For example, if your font is 1 rem and theline-height is 2.6, then the separation between your text elements will be 2.6rem.

10. Overflow" property : Manage what goes beyond the content

"overflow" allows you to manage the display of a part of the content or content that exceeds the element that has this css property.

The values available in Webflow are :

• visible: what goes beyond the content is visible
• hidden: what goes beyond the content is hidden
• scroll: you can scroll to see the content with a scrollbar (always visible)
• auto: you can scroll to see the hidden content with a scrollbar that appears only when the content goes beyond the block

There are also properties to hide only what goes beyond on an X (horizontal) or Y (vertical) axis: Find out how to disable only horizontal scroll in Webflow.

11. Property "background-color" : Manage the background color

The"background-color" property allows you to define a background color for an element.

In code, you can give different values:

• the color of the name in English (yellow for example)
• A hexadecimal value
• An RGB value
• An RGBA value
• An HSLA value
• etc.

12. Property "background-image" : Manage the background image

"background-image" offers the possibility to put an image in the background of an element.

In Webflow, you just have to choose the image you want in the Designer.

In code, you will need to store the image somewhere and add a link to theurl:

background-image: url('https://assets-global.website-files.com/615b648c9ce8937f3e6e7b70/61bb905629fddd70387d4d47_Logo-Digidop-Blanc.svg');

13. Opacity" property : Manage opacities

Thanks to the CSS property"opacity", we can apply more or less transparency to an element. The values for this property are numerical. With an opacity of 1, the element is fully visible, with an opacity of 0.5 the element is half transparent and 0 is invisible because it is fully transparent.

To better understand these properties and discover new ones, you can visit the MDN Web Docs site.