CSS has 228 different style properties. You won’t need them all, but there’s still a lot to learn to make your websites look beautiful. Until recently, mastering CSS involved long tutorials, editing cryptic text files, and endless browser refreshes. A slow and frustrating process.
Then Webflow turned up, and learning CSS became much easier. In this article, you’ll discover how using Webflow fast tracks your journey from CSS novice to style sheet ninja.
Webflow gives developers superpowers
As you probably know, CSS (cascading style-sheets) is the language used to apply styles to webpages.
At a high level, it lets you:
- target zero, one, or more HTML elements
- apply any number of style properties to them
Applying styles using CSS has a profound impact on the functionality and aesthetics of a webpage.
CSS code goes in a .css file, and updating styles traditionally involves editing this file in an IDE like VSCode. Then you refresh the browser to check the changes. And that assumes you even entered valid CSS in the first place.
With so many CSS properties to choose from, effecting everything from fonts & colors to layouts & positions, you’d need an encyclopedic mind to remember even a small portion of them.
That’s why when Webflow was released in 2013 it was such a game changer.
It’s a web-based app that let’s you design websites visually without writing any CSS code. Yes, you could say “no-code”.
So a bit like Wix or SquareSpace then?
Wrong!
Those tools offer limited control and encourage the use of templates, so your site looks like 100s of others. Webflow gives you full control of a webpage’s HTML and CSS, so you can literally create any design you imagine.
Using a visual editor, you drag and drop elements, apply styles to them, and see the results in real-time. In the background, Webflow generates the relevant HTML and CSS, saving you heaps of time.
On top of all this, Webflow offers other features such as:
- hosting and domain forwarding
- a CMS to store collections e.g. blog posts, authors
- fully customizable templates
These features combine into a compelling proposition for web developers. So it’s not surprising that there are now 394,106 live websites built using Webflow (stats from BuiltWith).
In the rest of the article we take a detailed look into how using Webflow helps you learn CSS.
But first, if Webflow is no-code, then why learn CSS?
Why CSS skills are important in the no-code era
Although Webflow is a no-code website builder, it’s not the only tool you’ll use as a web developer. And those other tools still work with raw HTML and CSS.
So for now, CSS is still an important skill to have, helping you:
- decompose & debug websites in the browser
- understand the fundamentals so you can work with other tools e.g. WordPress
- follow non-Webflow specific advice & tutorials
The neat thing is that there’s a very clear relationship between what you do in the Webflow editor and the underlying CSS. In fact, as long as you understand CSS selectors, you can learn all the different CSS style properties in Webflow itself.
CSS selectors
CSS selectors are a way to choose one or more elements to which you want to apply some styles.
Use selectors to select elements by:
- HTML tag e.g.
<body>,<h1> - class e.g.
<div class="product"> - id e.g.
<div id="sidebar">
Let’s see how the most popular type of selector works, selecting elements by class. This is useful when elements all share some common styles.
For example, imagine we’re creating a website to demonstrate 3 awesome computer hardware products to help boost developer productivity.
Here’s how the HTML looks.
<html>
<body>
<div class="product"><p>Automatic keyboard</p></div>
<div class="product"><p>Talking mouse</p></div>
<div class="product"><p>4D monitor</p></div>
</body>
</html>
Right now, our page looks pretty basic.
Let’s see if we can jazz it up a bit. We’ll style all <div> elements which have a product class with a light gray background.
Here’s the CSS selector for product.
.product {
background-color: lightgray;
}
The . indicates that we’re selecting by class. In this case, the product class. Everything inside the { and } are style properties applied to all elements with that class.
Setting background-color to lightgray produces this slightly better result.
Get the idea of how CSS class selectors work?
Cool! Then let’s quickly cover the other two types of selector.
To select a single element by its id attribute use #.
#sidebar {
background-color: lightgray;
}
And to select by HTML tag, use the tag name without a prefix.
div {
background-color: lightgray;
}
With these three simple selectors, whole empires are built. Or pretty webpages, at least.
With this knowledge, let’s dive into Webflow to understand its abstraction of CSS selectors, and how to use it to learn about the many style properties.
How Webflow works with CSS
Webflow abstracts the complexities of writing raw CSS. You do still construct CSS, but using a visual editor.
The way this works in Webflow is that you:
- select an element you want to style
- assign a class to the element via a selector
- assign style properties to the class
Let’s explore how to style the same HTML from earlier, but this time in Webflow.
Drag and drop <div> and <p> elements into the page from Webflow’s Add Elements dialog.
Our webpage now looks like this.
So how can we give the 3 paragraphs a class and apply a style?
Easy. 4 simple steps.
- Select the first
<div>block in the Navigator.
- In the Style panel on the right-hand side, create a product class by typing its name into the Selector text box and hit enter.
In the background, this creates a product CSS class and attaches it to to the <div> block.
- Now we apply styles to the selector by modifying any property in the Style panel. Select Backgrounds > Color and enter lightgray.
Notice that the webpage preview automatically updates with the new style.
- Now just apply the same product class to the other two
<div>elements.
All the elements are styled in the same way. Awesome!
So you’ve seen how straightforward it is to select elements and apply styles to them in Webflow.
Let’s draw a direct comparison between what we do in Webflow and the underlying CSS.
| Webflow operation | CSS equivalent |
|---|---|
| Create a class on a specific element using the selector text box | Creates a CSS class and attaches it to the element using the class attribute |
| Apply an existing class to an element | Attaches the CSS class to the element using the class attribute |
| Apply styles to a class | Applies styles using a CSS class selector |
It’s true. Our webpage still looks a bit nasty.
No worries. With Webflow, it’s easily tweak styles and see their effect in realtime, to quickly get the result you’re looking for.
Let’s look at a few of the most important styling options you need to know.
Creating classes in Webflow: you can also create a class by selecting an element without a class, then changing its style. Webflow creates a class with an auto-generated name e.g. Div Block.
Top 3 CSS styles to use in Webflow
Here are 3 styling options that web developers regularly use to make webpages pop.
- Padding & margins
Padding is the gap between the edge of an element and its contents. Margin is the gap between an element and the elements surrounding it.
Experiment with padding and margin to make elements look beautiful.
Here, I’ve updated the product class by setting both padding and margin to 20px.
- Typography
Changing how text looks can make a huge difference to a page’s visual appeal. With Webflow, it’s a breeze.
For example, here I’ve added another paragraph element with some placeholder text. I’ve then styled the product name by creating a product name class and setting font size to 18px and font weight to bold.
Don’t forget to apply the product name class to the other paragraph elements too.
- Layout
Simply put, a webpage is a collection of boxes within boxes, magnificently constructed to get the desired look. To help with this process, CSS layouts determine how an element (or its children) behave in relation to other elements.
The flex layout is a popular one, since it gives you a lot of control to determine how an element’s children behave. Like whether they should stack horizontally or vertically.
Of course, Webflow makes using flex layouts super-easy.
Create a new <div> element at the top level, and nest the 3 existing product elements inside. Create a class on the new <div> element called product container.
Now within the Styles panel, set the layout property to flex.
This automatically aligns the product container element’s children on the horizontal, rather than vertical axis. In my opinion, it looks much more appealing.
That was just the tip of the iceberg in terms of exploring CSS styles within Webflow. But what if you want to learn more?
Next steps
With this small taster, you can see the power of Webflow for creating webpages, and for growing your understanding of CSS properties. An invaluable skill for any web developer.
It’s worth noting that Webflow does have some limitations. For example, you can’t create complex selectors visually, but instead have to add them as custom code.
To get started with Webflow, head over to webflow.com and setup a free account. You can then follow along with the examples from this article. And if you want to take it even further, here’s a challenge.
Can you figure out how to recreate this design?
It’s based on the earlier example, with a few more styles added.
Why not flex your creative muscle and build something even more appealing? I’d love to see what you come up with.
