In this small guide, we will introduce you to 13 important CSS properties (that you should know and understand) for developing a website.
PS: This list is subjective and not exhaustive, as there are a vast number of different properties (with varying values).
1. Property "display": Managing Display
The CSS property "display" allows you to arrange the display of elements on a website. There are several values for this style:
- Block: Elements are displayed one below the other and take up the maximum available width
- Flex: We can position our elements along a vertical or horizontal axis, aligning and justifying them
- Grid: Elements are placed in rows and columns (in a grid)
- Inline: The width and height of the elements are determined by the size of the text and the spacing between lines
- Inline-block: Similar to inline, but allows us to define width and height
- None: Elements are not visible
By default, in Webflow (in most cases), when a new element is inserted, it takes on a display property with a value of "Block".
2. Property "margin" and "padding": Managing Spacing
The property "margin" manages the outer margins between elements. For "padding", it’s the same concept but for the inner margins of elements.
The values for these CSS properties can be numbers in px, %, ch, em, rem, vw, vh, and auto (only for "margin").
We can apply margins only on specific sides using "margin-top", "margin-bottom", "margin-left", and "margin-right". The same applies for "padding" with "padding-top", "padding-bottom", "padding-left", and "padding-right".
3. Property "width" & "height": Managing Sizes
The property "width" controls the width of elements, while "height" manages the height.
Again, we can assign values in rem, px, ch, em, vw, vh, or auto.
With the properties "min-width" and "min-height", we can set minimum sizes, and with "max-width" and "max-height", maximum sizes.
4. Property "position": Managing Element Positioning
Modify the position of your elements on your page using this CSS property.
The various values you can apply to "position" are: static, relative, absolute, fixed, sticky.
Learn more about the different types of positioning in Webflow!
5. Property "font-weight": Managing Font Weight
"font-weight" allows you to define the weight/thickness of your fonts.
In Webflow, you can set weights based on the font you are using, such as normal, medium, bold, semibold, light, etc.
In CSS, you can also use these keywords or use numerical values (for example: "700" for bold).
6. Property "color": Managing Text Color
"color" sets the color of a text. The value can be the name of a color (in English), for example "yellow" for yellow, a hexadecimal value (HEX), or an RGB value.
7. Property "font-size": Managing Font Size
The property "font-size" allows you to modify the size of your fonts. In Webflow, you can specify sizes in rem, px, ch, vh, vw, %, etc.
Why use REM instead of Pixels on your website!
8. Property "text-align": Managing Text Alignment
With "text-align", you can set the alignment of text within a block or for a text element. Natively in Webflow, you have 4 alignment options (text-align: left; text-align: right; text-align: center; text-align: justify).
With a bit of customization, you can add other values such as text-align: justify-all; text-align: start; text-align: end; text-align: match-parent; etc.
9. Property "line-height": Managing Line Height
This CSS property allows you to customize the size (height) of the line separating text elements.
The values (in Webflow) can be REM, PX, EM, VW, VH, %, or without a unit. When there is no unit, the value is a multiplier of the font size. For example, if your font is 1 rem and the "line-height" is 2.6, then the spacing between your text elements will be 2.6rem.
10. Property "overflow": Managing Overflow Content
"overflow" manages the display of content that exceeds the element with this CSS property.
The available values in Webflow are:
- visible: the exceeding content is visible
- hidden: the exceeding content is hidden
- scroll: you can scroll to see the content with a scrollbar (always visible)
- auto: you can scroll to see hidden content with a scrollbar that only appears when the content exceeds the block
There are also properties to hide only what overflows on the X (horizontal) or Y (vertical) axis: Discover how to disable only horizontal scroll in Webflow.
11. Property "background-color": Managing Background Color
The property "background-color" allows you to set a background color for an element.
In code, you can provide different values:
- the color name in English (yellow for yellow, for example)
- a hexadecimal value
- an RGB value
- an RGBA value
- an HSLA value
- etc.
12. Property "background-image": Managing Background Image
"background-image" gives the option to set an image as the background of an element.
In Webflow, you just need to choose the image you want in the Designer.
In code, you will need to store the image somewhere and add a link to the url:
background-image: url('https://assets-global.website-files.com/615b648c9ce8937f3e6e7b70/61bb905629fddd70387d4d47_Logo-Digidop-Blanc.svg');
13. Property "opacity": Managing Opacity
With the CSS property "opacity", you can apply varying levels of transparency to an element. The values for this property are numeric. With an opacity of 1, the element is fully visible, an opacity of 0.5 means the element is half transparent, and 0 means it is completely invisible.
To better understand these properties and discover new ones, you can visit the MDN Web Docs.
