University
Home
Search
⌘E
Dashboard
Try Webflow — it's free
Learn
Courses
Docs
Interactive Learning
Glossary
Certifications
Engage
Support
Community
Events
Forum
Accessibility
Switch to Light mode
Switch to Dark mode
High contrast
Glossary
CSS preprocessor

CSS preprocessor

A CSS preprocessor is a program that helps developers write Cascading Style Sheets (CSS) more effectively by providing advanced features such as variables, functions, and nesting. Sass, Less, Stylus, and other preprocessors simplify the process of writing and maintaining CSS.

Browsers can only understand CSS, restricting the capacity to write clean, reusable rules and eliminating the ability to reuse a collection of rules in multiple selectors with unclear pieces of data across a stylesheet. Preprocessors help overcome these limitations, extending the functionalities of standard CSS.

Sass, an acronym for Syntactically Awesome Style Sheets, is one of the most popular CSS preprocessors. Sass uses a syntax similar to standard CSS but with extensions like variables, nesting, mixins, and functions.

Less, short for Leaner Style Sheets, is a lightweight, easy-to-learn CSS preprocessor that enhances standard CSS by adding functionalities similar to Sass, such as variables and mixins.  

Stylus is a popular choice for building large-scale web applications. With a minimalistic syntax inspired by Python, it’s flexible and powerful, allowing developers to create complex stylesheets with minimal code.

CSS preprocessors make code more organized, easier to maintain, less repetitive, and less time-consuming to produce.

Visit Webflow University for in-depth lessons on CSS and HTML.

Relevant courses

Webflow Ecommerce

Learn how to build and design your Webflow Ecommerce store. Customize every detail and launch a fully functional online store — without writing code.

Landing page generator for Ryan Reynolds

Learn how to build a dynamic landing page generator in under 30 minutes.

Client's guide to the Editor

This is the Client's guide to the Webflow Editor. Share these lessons to get your clients up and running.

SEO fundamentals

An overview of search engine optimization (SEO) fundamentals and best practices — learn how to optimize your content from the start.

Moving your business online

A free course on how to take your business online. Serve more clients and generate more revenue in this new environment.

CSS layout & positioning

Dig into the world of HTML and CSS layouts — learn how they work together and get an overview of display properties like inline block and flexbox.

Other glossary terms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Form submission

→
When someone sends data through one of your site's forms.

Minimum width (min width)

→
The min-width CSS property defines an element's minimum width. This can be defined in absolute terms (pixels) or relative terms (ems, rems, percentages, viewport-height, or viewport-width).

Backlink

→
A backlink, also referred to as an inbound link, is a hyperlink from one website to another website.

Save as Backup

→
The ability to manually save a version of your site that you can restore at a later date using the keyboard shortcut Command + Shift + S (on Mac) or Control + Shift + S (on Windows).‍

Cascading rules

→
The order in which a Webflow site's CSS styles flow from desktop to mobile breakpoints.

Widget

→
A widget is an interactive element embedded in a user interface that facilitates specific user actions or displays important information at a glance.

Left padding

→
Left padding is a CSS property that defines the space between an element's left border and its content.

Empty elements

→
Empty or void elements are HTML elements that don’t require a closing tag because they contain no content.

Last updated

→
The last time someone made a change to your site.

Syntax

→
Syntax is the name for the rules specifying a programming language's structure and formatting.

Comment

→
A comment is a text note in source code that offers context, internal information, or other guidance to any developers using it.

HyperText Markup Language (HTML)

→
A standard markup language that web browsers use to display websites.

Navbar

→
A navbar, or navigation bar, is an interactive user element with a menu or a set of links to a website’s main sections.

Language code

→
A language code is a standardized code of letters and numbers that represent different languages.

XML sitemap (sitemap.xml)

→
An XML (Extensible Markup Language) sitemap is a text file that lists a website's pages to help search engines crawl and index them.

Top margin

→
Top margin is a CSS property that defines the space between the top edge of an element and its surroundings, such as other elements, the browser window, or the edge of a container.

Web Accessibility Initiative (WAI)

→
The Web Accessibility Initiative (WAI) is a World Wide Web Consortium (W3C) project to enhance accessibility for users with disabilities.

Media section

→
A section of the Add panel that holds multimedia elements like images, video, and Lottie animation.

Smoke test

→
A smoke test, also called build verification testing or confidence testing, is a preliminary examination to determine the basic functionality of a software, website, or application.

Switch field

→
Available in CMS Collections. This field offers you a powerful filtering tool for Collection items. For example, you could create a switch labeled "Featured?" for Blog Posts, and then switch on the toggle to showcase particular posts.

Footer code

→
Footer code creates a section at the bottom of every web page that displays important information like disclaimers, copyright or contact information, and links to related documents.

Beacon

→
A beacon — also called a web beacon or web bug — is an HTML-embedded object that tracks user behavior on a web page.

Button

→
A button is an interactive element that facilitates user actions.

Forms section

→
A section of the Add panel that houses form elements like inputs, checkboxes, and radio buttons.

Flex-order

→
In CSS, flex-order is a property that allows you to manipulate the default source order of the items within a flex container. Flex-order is especially useful when you want content to display differently on mobile than on desktop.

Attribute

→
An attribute in HTML is a term inside an opening tag of an element, such as a font or color, that provides additional information about the element.

Closing tag

→
A closing tag is an instructional piece of code that ends a section of page content in HTML.

SCA and PSD2 Regulations

→
Mid-September 2019, new European requirements for authenticating online payments were introduced in Europe as part of the second Payment Services Directive (PSD2). The Strong Customer Authentication (SCA) requirements apply to businesses in the European Economic Area (EEA) that accept online card payments from cardholders whose banks are also located in the EEA.Webflow Ecommerce payments are PSD2 and SCA compliant (i.e., support 3D Secure payments) for European customers.If you’re a merchant in the European Economic Area (EEA), all you need to do to ensure that your Webflow Ecommerce store is PSD2 and SCA compliant for your European customers is to republish your store if it wasn’t published on or after September 11, 2019. Read more about how to make your ecommerce store compliant in our Payment gateway article.

Null

→
“Null” represents the absence of a value or the presence of invalid objects in computer science and web development.

Webflow Support

→
The place to go when you need help using Webflow.

Head code

→
Custom code that's added just before the closing </head> tag in your site's HTML file. Learn more about custom code in head and body tags.

Site

→
What you create in Webflow! You can publish sites to a webflow.io staging subdomain for free, export the code on a paid plan, add hosting on any paid plan, or add a Site plan to any site to connect your custom domain and unlock hosting features.

JSON

→
JSON, short for JavaScript Object Notation, is a human-readable, lightweight format for recording, storing, and exchanging data.

SaaS

→
Software as a Service (SaaS) is a cloud-based approach to delivering software on a subscription basis without requiring local installation.

BiDi

→
BiDi stands for bidirectional. When a document is BiDi, it supports text that reads from right to left and left to right.

Style panel

→
The first tab in the right-side panel that allows you to assign classes to elements and style them.

Optimizely

→
A web app that helps you measure how different site designs impact user behavior.

Hit

→
A hit is a request to a web server from a browser for a specific resource.

Publish destination

→
The specific domain or subdomain where your Webflow site is displayed.

Meta title

→
A meta title is an HTML element that defines a web page's title and appears in browser tabs and search snippets on search engine results pages (SERPs) as a clickable headline.

Contextual advertising

→
Contextual advertising is a form of paid advertising that matches web content with ad intent.

Left toolbar

→
The vertical bar of tools on the left side of the Webflow Designer. It holds the Add panel, Symbols panel, Navigator panel, Pages panel, CMS panel, Ecommerce panel, Assets panel, Settings panel, Site Activity log, Audits, Search, Video tutorials, and Help.

Password protection

→
Password protection is a security feature restricting certain website areas to authorized users, requiring a secret phrase or key to access them.

Pseudocode

→
Pseudocode is a simplified, informal representation of programming code that outlines a program’s structure and logic without strict syntax.

Deprecated

→
Deprecated HTML tags are old tags replaced by updated alternatives in modern web design and development.

Descriptor

→
A CSS descriptor sets specific properties and values of an at-rule (@-rule) element, dictating its appearance and behavior on a web page.

Parent

→
The element directly above in the hierarchy tree.

Micro conversion

→
Micro conversions are small but important user actions on a website that contribute to the overall conversion funnel.

Child

→
A child element is an element nested within a parent element in a hierarchy.

Duplicate element

→
To copy an element and its content, styles, and settings.

Alt text

→
Alt text, short for alternative text, refers to text that describes online images.

Syntax error

→
Syntax error refers to a mistake in code that violates the programming language’s rules and prevents the code from executing correctly.

Input field

→
An HTML input field, represented by the syntax <input>, is a web page element where users input data, like text and numbers.

Second-level domain (SLD)

→
A second-level domain (SLD) is the part of a domain name that precedes a top-level domain (TLD).

Element breadcrumbs

→
A navigational aid that displays in the bottom of the Webflow Designer to&nbsp;help you keep track of the element you're interacting with in relation to its hierarchy.

Heading

→
A heading is a text element that provides a title or headline for a section of content on a webpage. These elements guide users and search engines through your content.

Parent folder

→
A parent folder is a directory containing one or more folders and files.

Link field

→
A link field is a form input field that enables you to add links to your designs dynamically. You can connect a link field to text links, buttons, or other link elements to turn them into active links.

Shared Workspace template

→
Shared Workspace templates are templates made from your own sites. They can help you create sites with similar layouts and increase your efficiency when designing. Your Workspace members will also have access to your shared Workspace template(s).

Collection field

→
An individual field within a Collection. You'll select which fields to display in dynamic Collection lists and Collection pages.

Free plan

→
The perfect Webflow subscription&nbsp;for getting started, giving you access to all Designer features, so you can start building a site right away.

States dropdown menu

→
The dropdown menu to the right of the Selector field that allows you to access and change the styles of an element when it is hovered, pressed, or focused.

Collection item

→
An individual item within a Collection. For example, in a “Blog Posts” Collection, the Collection items are individual blog posts.

List

→
An element that contains ordered (numbered) or unordered (bulleted) lists.

Common targets

→
All elements on the page targeted by the same selector.

Read-only link

→
A way for others to test/debug your Webflow site in the Designer without being able to save or make permanent changes.

PNG (Portable Network Graphics)

→
PNG, short for Portable Network Graphics, is a lossless image format known for its transparency support and quality retention after compression.

URL

→
A Uniform Resource Locator (URL) is a standardized web address format that allows users to identify and access an online resource.

Field label

→
A field label is descriptive text that helps users understand what information to enter in an input field on a web form.

Typography section

→
A section in the Style panel that houses CSS properties related to how typography is displayed such as font, font size and height, and align.

Selector state

→
A pseudo-class that allows you to change the styles of an element when it is hovered, pressed, or focused.

Webclip

→
A 256 x 256 px image associated with your website that shows up when your website link is saved to an iPhone home screen.

Effects

→
A section in the Style panel that houses CSS properties for changing how an element appears, such as its opacity, outline, and box shadows.

Display: block

→
Display properties tell browsers how an element should behave on the page. The most common display property keyword category is display: block.

Safe

→
"Safe" is a Hypertext Transfer Protocol (HTTP) method that doesn't modify the server's state or resources.

Export

→
A downloadable ZIP file that contains your Webflow site's HTML, CSS, JS, and image files.

Webflow CMS

→
Webflow's content management system (CMS) is where dynamic content (Collections and their Collection items) is stored and maintained so you can reference it throughout your site. A CMS lets you input data in one location, then use Collection template pages or Collection lists to display that content without having to update the content displays one at a time.

Gamut

→
Color gamut describes the full range of colors a device can reproduce on its display.

Certified

→
A digital certificate is a data file embedded in the site that signals the site’s safety to visitors, internet service providers (ISPs), and servers.

Product attribute

→
Product attributes are specific characteristics that define purchasable merchandise or commodities and provide relevant information to customers.

Rich text element

→
Allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually.

Element

→
Elements are individual HTML components that constitute a webpage’s structure and contents.

Link

→
A link, short for hyperlink, is a clickable website element that enables navigation between different web resources.

Checkbox

→
Checkboxes are HTML structures that allow visitors to input data.

Display: inline-block

→
The display: inline-block CSS property defines an element’s appearance and behavior. CSS designers use this code to create website layouts.

Flex child

→
An element contained within a parent element that has display: flex set.

Width

→
Width defines how wide an element can be. This can be defined in absolute terms (pixels) or relative terms (ems, rems, percentages, viewport-height, or viewport-width).

GIF

→
A GIF (Graphics Interchange Format) is a digital image format that uses multiple frames of an image or soundless video to create a short, looping animation.

Dashboard

→
From your Dashboard, you can access, create, and manage all your sites.

Facebook button

→
A Facebook button is a clickable element on a website that allows users to connect to or share content on the social media platform.

Website name

→
A website name, or domain, is the title of a website that appears in the browser tab and search engine results.

Header

→
A header is a section at the top of a webpage.

Java

→
Java is an object-oriented programming language for building dynamic, interactive web applications across platforms

Hyperlink

→
Hyperlinks are clickable elements that allow users to navigate between web pages, documents, or other types of digital content.

Real-Time Streaming Protocol (RTSP)

→
Real-Time Streaming Protocol (RTSP) is a standardized network protocol for transmitting real-time multimedia data like audio and video.

Locked site

→
When you have more unhosted sites in your Dashboard than your Workspace plan allows, those additional sites past your limit will be “locked” until you upgrade your plan. When you upgrade, you’ll be allowed more unhosted sites (up to the limit for your Workspace plan) and will be able to access your previously locked sites.

Web server

→
A web server is a computer program or hardware device that delivers web content to clients using HTTP. It handles client requests for web pages, images, and videos.

Margin

→
Margins are an essential spacing element of web design, dictating the amount of whitespace between a box and its surroundings.

Flex-grow

→
The flex-grow CSS property defines how much an element grows relative to other flexible items inside the same flex parent.

Text area

→
A form element that allows site visitors to enter multi-line data.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more