When designing a website or an application, some HTML elements will be repeated all over the place, such as headings, paragraphs, links, images, inputs, etc. To make sure the style of those elements is consistent over your entire project, you should apply the basic styles using the HTML tag itself as the selector instead of using a class.
Here is a list of elements for which Webflow allows you to use the HTML tag as the selector:
Every level of heading can be styled differently using only their tag, as every level has its own HTML tag: H1 through H6.
In the same fashion, you can apply basic tag styles to the text you put in Italic or in Bold inside your paragraphs or text blocks. Simply select an Italic Text element, and use its All Italics selector from the Selector dropdown, as illustrated in the example below:
If you would like to customize a few specific elements afterwards, you can simply add a class to those elements. It won't disturb or change the way the elements without that class are displayed.
Reusable classes is one of the basic concepts of CSS. In Webflow, you can stack multiple classes together just like you can in regular CSS. However, the UI-only approach makes it quite difficult to create basic styling classes that can be reused and applied to different types of elements.
What Webflow allows you to do easily is creating combo classes, meaning that when you apply a second class to an existing class, a new style is applied on top of the first class's styles. However, this isn't quite as powerful as the reusable classes you can build in pure CSS: if you wanted to apply that second class's styles to a different element, you would have to create new classes and define the styles all over again.
Luckily, it is still possible to create those more powerful reusable classes in Webflow, it just isn't displayed or suggested in its user interface. It does require a basic understanding of CSS in order to understand the inner workings of it, but it's fairly straightforward nonetheless.
Simply create an element and assign it the new reusable class you want to create. Give the class the styles that class should define, and... that's it. You can now use that class as you would with combo classes, except you can use it on any type of element.
On this example, the four classes used are totally independent, and each bring their own styles:
Don't get me wrong: combo classes are great, and they do have their place, but the reusable classes described above can get you pretty far and make your development easier.
Headings are quite useful to put emphasis on an element or a section of text. H1 and H2 tags are bigger and bolder by default, so it's only normal that people would use them to do just that.
However, the level you give to a heading has an actual meaning. Search engines and other website parsing services use the headings to determine the structure of your page.
H1 tags should generally contain the main subject of your page, and therefore, should only appear once per page. Every other level after the H1, so H2 through H6, should contain the subject of the sub-sections of the upper level.
Here's an example based on this page:
I could keep going on, but I think you get the point: H3 tags are subsections of the previous H2 tags, H2 tags are the subsections of the H1 tag, and the H1 tag is the subject of the entire page. Although they aren't usually used as frequently, H4, H5 and H6 tags have the same meaning.
Now, if all you wanted wanted was to make some text bigger and bolder without actually giving it more semantic importance in the page (and therefore, without messing with your on-site SEO), you can simply create a class that does just that.
Oftentimes, websites are composed of a few sections that are simply reused with different content on multiple pages. This can easily be done by copy-pasting elements across your site, or by creating the same structures and using classes to give them the right styles.
However, when you do things that way, you might have to find and update every section manually if you want to make changes later on. Luckily for you, there is a better way to do this. Webflow allows you to create reusable sections and elements by turning them into Symbols.
To create a symbol, simply create and style your section, select it, and click "Create new section" in the Symbols menu. You can also use the Shift+Cmd+A shortcut on your keyboard when your section is selected. Then, you can simply add this symbol wherever you need it on your other pages.
The most powerful aspect of symbols, however, is that you can use them to create section templates. This can be done using Webflow's Override fields feature. When you double-click on a symbol to edit it, you can create dynamic fields for that symbol in the Element settings menu on the right.
In that menu, create a field for every element who's content you want to be able to change (ex.: your section's heading).
Then, select the element in your symbol - in our example, the section's heading - and select your newly created field in the Element settings menu on the right.
Now, whenever you include this symbol in a page, you will be able to customize its content!
A great use case for this feature is creating a "Sign up" section, and making the heading and subtitle of this section dynamic, so you can easily update them to match the subject of every page.
If you liked these tips, tricks and good practices, and would like to find more, here is a list of valuable resources that you can explore and learn from for free:
This project has been created and maintained by Émile Perron.
If you liked it, you can visit my website and follow me on your platforms of choice:
.svg)
.jpg)
