Master the art of CSS custom code in Webflow: discover 7 essential snippets to optimize your website design and customize every detail.
Introduction
As a Webflow developer, you know that the platform offers a wealth of possibilities for creating websites that are already highly advanced. However, there are times when you need togo beyond Webflow Designer's native functionality to bring your design ideas to life. That's where custom CSS comes in.
Custom code in Webflow opens the door to infinite possibilities for personalizing and optimizing your projects. Whether you're looking to intervene in page layout, typography or animation, custom CSS code can be an excellent ally in Webflow.
So in this article, we'll explore a selection of simple but carefully chosen CSS code snippets to elevate your projects. Each of these snippets serves a specific purpose, allowing you to do something that isn't natively possible in the Webflow Designer. Let's get started!
7 custom CSS codes for your Webflow projects
Page layout, typography, dynamic CSS interactions...
Prevent horizontal scrolling (with sticky)
One of the most common layout problems is dealing with unwanted horizontal overflow. Sometimes, the content of a section can be wider than the browser window, causing annoying horizontal scrolling.
Pour résoudre ce problème, vous pouvez ajouter {overflow: hidden;} à la section ou au page-wrapper, mais il y a un inconvénient. L’utilisation de {overflow: hidden;} rend la propriété CSS {position: sticky;} inutilisable sur tout élément enfant (ce qui n’est pas très pratique).
To remedy this, you can simply add the following property instead (typically, on the page-wrapper class):
L'ajout de {overflow: clip;} à un élément empêchera le scroll horizontal tout en laissant possible l’utilisation de {position: sticky;} sur les éléments enfants.
Example of use: This CSS property can be systematically applied to the page-wrapper to prevent unwanted horizontal scrolling.
Overwrite Webflow's default styles
By default, Webflow applies basic styles to certain HTML elements such as links, form fields and navigation bar links. This allows links, for example, to be made obvious even if you forget to style them.
However, there may be times when you want to have more control over these elements and have them inherit the CSS of their parent. For example, if you're creating a custom card with a Link Block, you may not want your children's texts to be underlined (which is the case with Webflow's default styles).
The following snippet therefore allows you tooverwrite the default values of the elements mentioned and make them inherit the CSS of their parent:
By adding this snippet of CSS code, taken from Client-First 's global styles(click here for documentation), you'll ensure that the styles (color, size, underlining, etc.) are inherited from the parent. And if you want to apply a particular, non-inherited style, you can always add it directly to the element.
Application example: This snippet is particularly useful if you want to remove Webflow's default CSS styles and manage targeted elements more globally.
Avoid lonely words (or punctuation)
A little twist here: this is not a CSS snippet, but rather a useful keyboard shortcut for inserting a special character.
When you're editing text, it's sometimes frustrating to see a tiny word (or punctuation symbol) isolated on the last line. You know, the "?" all alone on its own line.
To avoid this, you can add a non-breaking space with Shift + Space, so that the words surrounding this space always remain on the same line.
Example of application: It's particularly useful to add it just before a "?" or "!" punctuation mark, as in a FAQ for example.
Balance the different lines of text
Particularly for headlines, in the same vein as the previous situation, you can sometimes end up with text on two lines whose content distribution is not ideally balanced, which can be frustrating.
To remedy this, you can use the following CSS property to balance the text distribution on all lines. As the situation is very specific, it makes less sense to apply this property to a specific class, but rather to a custom attribute that can be given to a particular element.
Example of application: This CSS property can be particularly useful for balancing the distribution of certain titles, to keep the design as balanced as possible.
Change selection color
When users select text on your site, it can be interesting to customize the color of the selection to match the brand identity and make a difference.
To do this, you can use the following CSS code snippet:
This piece of CSS code lets you specify the background color and text color when text is selected by the user.
Example of application: This snippet can be used to reflect a site's brand identity and match its overall aesthetic.
Stylize an element when hovering over its parent
In the style panel, you can modify the properties of an element when it is hovered over. However, you may sometimes need to modify the properties of a child element when a parent element is hovered over.
In this case, you can use Webflow's interaction panel. However, this involves integrating Javascript code into your project, which is much heavier than a few lines of CSS , more suitable for small-scale interactions.
To style an element when its parent is hovered over, you can add a CSS snippet as follows:
The :hover indication indicates that the animation will take place when the parent element is hovered, and the children selector immediately following it (without comma) indicates that it is the parent element that will be styled.
Application example: Let's imagine that, when hovering a custom button, you want to change the underline (created with a Div Block) from 0% to 100% width, you can manage the hover animation by adding the following CSS snippet.
Stylizing a specific item from a collection
When working with collections in Webflow, it can be useful to style a specific element differently from the others. Here's a snippet to help you do just that:
This CSS code allows you to target a particular element of a collection (in this example, the third item) and apply specific styles to that element only (or, as in the example, to one of its children).
Alternatively, to target several items at regular intervals, you can adapt the following snippet:
A little technical: the first number defines the interval and the second defines the position of the target element within this interval. The preceding CSS code therefore targets the second item in each interval of four: 2 (4*0 + 2), 6 (4*1 +2), 10 (4*2 +2), etc.
Application example: This CSS code snippet can be useful if you have a long CMS collection to which you'd like to add a little variation.
By adding these custom CSS code snippets, you can extensively customize the appearance or behavior of certain elements of your Webflow site. These tricks give you total flexibility to meet your design needs.
Conclusion
With these custom CSS code snippets at your disposal, you now have the opportunity to expand your design horizons on Webflow. Feel free to experiment with them to discover how they can enrich your projects.
To find out more about this topic, take a look at the following articles:
.jpg)
.jpg)
