Introduction
Designing a website can feel intimidating. With the right tools and knowledge, though, you can build a site that works well and looks good. Understanding how CSS properties work helps you improve your design skills noticeably. CSS properties sit at the heart of web design and give you more control over how your page looks and behaves. In this article, we go through 11 CSS properties to know and how to use them in Webflow to build the site that fits you or your business.
What is a CSS property?
CSS stands for Cascading Style Sheets. It is a computer language that defines the look, usability and formatting of web pages. It lets you control the layout of several web pages at once. CSS properties are the rules that determine how HTML elements appear on a web page. They are given values such as color, font family, width, height, margin size or padding. With CSS properties, you can customize how a specific element appears on your page by changing its size or color, or by hiding it completely.
CSS properties also let developers build interactive features with JavaScript libraries such as jQuery UI or ReactJS. Developers can then add dynamic visual effects, such as animations or transitions, without writing code directly in HTML.
1. The "display" property, to manage display
The CSS "display" property sets how elements are displayed on a website. It accepts several values:
- Block. Elements are displayed one below the other and take up the full available width.
- Flex. Elements are positioned on a vertical or horizontal axis, and you can align and justify them.
- Grid. Elements are placed in rows and columns, in a grid.
- Inline. The width and height of elements depend on the text size and line height.
- Inline-block. It works like inline, but you can set a width and a height.
- None. Elements are not visible.
By default in Webflow, every new element you insert gets a display property with the value "Block".
2. The "width" and "height" properties, to manage sizes
The "width" property controls the width of elements, and "height" controls their height.
Here too, values can be expressed in rem, px, ch, em, vw, vh or auto.
The "min-width" and "min-height" properties set minimum sizes, and "max-width" and "max-height" set maximum sizes.
3. The "color" property, to manage text color
The "color" property sets the color of a text. The value can be a color name, for example "yellow", a hexadecimal value (HEX) or an RGB value.
4. The "text-align" property, to manage text alignment
With "text-align", you set the alignment of text in a block or a text element. Natively, Webflow offers 4 alignments (text-align: left; text-align: right; text-align: center; text-align: justify;).
With a little custom code, you can add other values such as text-align: justify-all; text-align: start; text-align: end; text-align: match-parent; and more.
5. The "font-weight" property, to manage font weight
The "font-weight" property sets the weight, meaning the thickness, of your fonts.
In Webflow, depending on the font you use, you can choose weights such as normal, medium, bold, semibold, light and more.
In CSS, you can use the same keywords or, if you prefer, numeric values (for example "700" for bold).
6. The "overflow" property, to manage overflowing content
The "overflow" property controls how content that extends beyond its element is displayed.
The values available in Webflow are the following:
- visible. Overflowing content stays visible.
- hidden. Overflowing content is hidden.
- scroll. A scrollbar, always visible, lets you scroll through the content.
- auto. A scrollbar appears only when the content overflows the block, to show the hidden part.
7. The "background-color" property, to manage background color
The "background-color" property sets the background color of an element.
In code, it accepts different values:
- the color name (yellow, for example)
- a hexadecimal value
- an RGB value
- an RGBA value
- an HSLA value
- and more
8. The "line-height" property, to manage line spacing
This CSS property lets you customize the line height, meaning the space between the lines of a text.
In Webflow, values can be in REM, PX, EM, VW, VH, % or unitless. Without a unit, the value multiplies the font size. For example, if your font is 1 rem and the "line-height" is 2.6, the line height of your text will be 2.6 rem.
9. The "margin" and "padding" properties, to manage spacing
The "margin" property controls the outer spacing between elements. The "padding" property works the same way, for the inner spacing of elements.
Their values are expressed in px, %, ch, em, rem, vw, vh and auto (only for "margin").
You can apply margins to specific sides only with "margin-top", "margin-bottom", "margin-left" and "margin-right". The same applies to "padding" with "padding-top", "padding-bottom", "padding-left" and "padding-right".
10. The "opacity" property, to manage opacity
The CSS "opacity" property makes an element more or less transparent. Its values are numeric. With an opacity of 1, the element is fully visible. At 0.5, it is half transparent. At 0, it becomes invisible because it is fully transparent.
11. The "font-size" property, to manage font size
The "font-size" property changes the size of your fonts. In Webflow, you can set sizes in rem, px, ch, vh, vw, % and more.
Conclusion
CSS properties let you build websites that look good and work well. Mastering the 11 CSS properties covered in this article will help you get very good results in Webflow. CSS is a versatile language, so feel free to test new techniques as you get comfortable with it, and ask for help when you need it. Working with CSS properties can also be fun and rewarding. Enjoy the practice, because that is how you will improve.
You now know why CSS properties matter for your Webflow site and how to use them.
Your turn.