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

CSS (Cascading Style Sheets)

Cascading Style Sheets (CSS) is a web development language that controls the appearance of elements on a webpage. It works hand-in-hand with markup languages like HTML (Hypertext Markup Language) or XML (Extensible Markup Language) to define the visual style and formatting of those elements.

CSS separates the underlying code from its presentation, allowing web developers to control a website's visual style — such as its fonts, colors, and layout, and create responsive design variations to adapt to different devices and screen sizes — without altering its content. 

For example, CSS allows you to specify that all paragraphs in a flexbox should be in a 12-point font size, in blue, and with a 10px left margin. You can apply this command to all sections or a specific body of text — all while making minor tweaks to the code.

CSS is a powerful tool for any web developer. Visit our introductory CSS article on Webflow University or learn more about creative styling to take your web design skills to the next level.

Relevant courses

Ultimate web design course

From the fundamentals to advanced topics — learn how to build sites in Webflow and become the designer you always wanted to be.

Accessibility on the web

Learn about accessibility on the web and how to create inclusive and accessible sites without writing code.

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.

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.

CMS & dynamic content

Learn how to use Webflow CMS to build completely custom websites powered by dynamic content, and define your content's structure and style.

Web elements

A comprehensive look at the building blocks and elements Webflow puts at your fingertips — start designing websites visually, with confidence.

Other glossary terms

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

Gutters

→
Gutters refer to the whitespace between content columns on a webpage.

BiDi

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

Conditional

→
Conditionals, also known as conditional statements or expressions, are coding instructions that tell a program to execute an action for a certain condition.

Select field

→
A form element that allows you to make a selection in a dropdown list.

Display: block

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

Percent

→
A measurement unit relative to an element's parent.

Automagically

→
Automagically describes complex content or functions that appear as if they were created using magic.

Language code

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

Keyboard shortcuts

→
Keyboard shortcuts are combinations of keys on a computer keyboard that perform a specific action or command within an application or operating system.

Application context

→
An application context is a set of data that identifies an application’s tasks, where those tasks originate, and how those tasks are configured.

JavaScript

→
JavaScript is a programming language web developers use to create dynamic interactions and effects for web pages and applications.

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.

Graphical User Interface (GUI)

→
A Graphical User Interface (GUI) is a visual medium that enables visual interaction with software applications or electronic devices through elements like icons, buttons, and menus.

Key

→
A key, or web key, is a unique identifier that authorizes access to a webpage or service.

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.

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.

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).‍

Form block

→
Form blocks allow you to add form elements to a website, including appointment booking, surveys, applications, polls, and contact forms.

Call stack

→
A call stack is an ordered list of the functions (or stack frames) a program has to execute before it returns a result.

Cryptanalysis

→
Cryptanalysis examines cryptographic systems to find weaknesses that could allow attackers to uncover plaintext or break encryption.

Total asset size

→
The total weight of your site's HTML, CSS, JS, and images.

Right-side panel

→
The far right vertical panel in the Designer that houses the Style panel, Element settings panel, Style manager panel, and Interactions panel.

Plugin

→
A plugin, also called an add-on or extension, is a software component that enhances the host or browser or application by adding new features or capabilities to it.

Bottom bar

→
A bottom bar is a navigation bar at the bottom of an app or webpage.

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.

Python

→
Python is a high-level, object-oriented, general-purpose programming language (GPL).

Strong text

→
The <strong> element defines important text with added semantic importance.

Link

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

Bounding box

→
A bounding box is a rectangular border around a website element (e.g., a heading, paragraph, or image) that appears during the design process.

IP address

→
An IP (Internet Protocol) address is a unique string of characters identifying devices connected to the internet.

Style panel

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

Item state

→
The default UI state for Collection lists, which displays the items in the Collection. It is the opposite of the empty state.

Descriptor

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

Lightbox

→
A lightbox displays content in a popup or modal window on top of a web page’s main content.

Page settings

→
You can manage your site pages within Page settings. Here, you can rename, duplicate, delete, or save pages as drafts. You can also set SEO, Open Graph, and site search settings, as well as insert custom code. Additionally, you can set RSS settings for Collection pages.

Hyperlink

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

Object-oriented programming (OOP)

→
Object-oriented programming (OOP) is a programming approach that organizes code into self-contained units of data, functions, and behavior.

Cryptographic hash function

→
A cryptographic hash function takes an input message of any length, such as a file, message, or password, and uses a mathematical formula to produce a fixed-size output (hash).

Slug

→
A slug, also known as a URL slug or a website slug, is descriptive text that appears at the end of a URL and identifies a web page.

Domain-Specific Language (DSL)

→
A Domain-Specific Language (DSL) is computer script that solves software problems in a specific domain.

Bad neighborhood

→
Bad neighborhoods are groups of websites that search engines have downgraded because they violate search engine guidelines.

Registrar

→
A registrar, or domain name server (DNS) registrar, manages the sale of domain names and the assignment of IP addresses, ensuring each domain’s uniqueness.

Closing tag

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

Tablet breakpoint

→
A Webflow canvas setting for creating styles that affect viewports with a minimum width of 768px and a maximum width of 990px. Also known as the tablet media query.

ATAG

→
Authoring Tool Accessibility Guidelines (ATAG) are a layered rule-set that influence how designers and developers create a more accessible internet.

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).

Buffer

→
A buffer is a temporary storage area that holds data while transferring it between different components or systems.

Flexbox

→
Flexbox is a CSS layout mechanism that offers precise alignment and stacking control for the content inside an element.

Robots.txt

→
A robots.txt file instructs search engine crawlers which webpages and sections they can or can't crawl and index.

Sibling

→
An element that shares the same parent of another element.

Deployment

→
In software and web development, deployment is the process of moving code from one environment to another, usually in the form of changes or updates.

Save

→
The Designer automatically saves your progress every 10 seconds.

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.

Node title

→
The type of element you're working with, i.e., H1, link, button, etc.

Total Form Submissions

→
The amount of times a site visitor submits data using your site's form(s).

Display: flex

→
The most flexible display property in CSS is the aptly named display: flex, which allows you to create flexible layouts with elements that you can align and distribute vertically or horizontally.

Domain name forwarding

→
Domain name forwarding is a process that automatically redirects visitors from your domain name to a different web address.

Document object model (DOM)

→
The document object model is a platform- and language-neutral interface that lets programs and scripts dynamically access and update the content, structure, and style of documents.

Bug

→
A bug is an error, fault, or flaw in an application or software that causes the program to behave unexpectedly, often producing inaccurate and invalid output.

BigInt

→
BigInt, which stands for “big integer,” is a JavaScript data type. JavaScript uses data types to decide how to treat a piece of data.

Receipt emails

→
Email confirmations you receive upon making Webflow payments.

Workspace plan

→
A Webflow plan that applies to your entire Workspace.

Sitemap URL

→
The location your sitemap is stored in relation to your site, and what’s used when submitting your sitemap to search engines.

Ligature

→
A ligature in typography groups adjacent letters or characters into one glyph.

Folder settings

→
Allows you to manage your folders.

Free plan

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

Cascading rules

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

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.

Ciphertext

→
Ciphertext is unreadable, encrypted data that ciphers use for security during data transit.

Image

→
A Webflow element that displays graphical files on your website.

Collection limits

→
By default, Collection lists display all items in a Collection, but you can add limits to control the number of Collection items that display.

Date/Time field

→
A field available in CMS Collections. This field lets you display a date and time in a Collection and/or Collection item.

Tag

→
A Hypertext Markup Language (HTML) tag is a code snippet that defines and describes the structure and content of web pages.

Flex-direction

→
Flex-direction is a CSS property that defines the main axis and direction of flex items, dictating the arrangement of the items within a flex container.

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.

Maximum width (max width)

→
The “max-width” CSS property defines an element’s maximum width.

Shim

→
A shim is a code snippet enabling modern web features to function within older programming or browsing environments.

Text block

→
A typography element that is used when no other element is specifically suitable.

Flex-grow

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

Rich text field

→
A rich text field is an input tool for formatting or applying text styles, such as bold, colors, font sizes, italics, underline, and other visual modifications.

Last published

→
The last time your site was published.

Micro conversion

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

Webflow Editor

→
Webflow's visual content editor. You can access it through the Webflow Dashboard by clicking the “3 disclosure dots” on a site thumbnail, then clicking “Editor.” Guest editors can access it anywhere on their live site by adding ?edit after the page URL (e.g., yoursite.com/page/?edit).

A/B testing

→
A/B testing compares two different versions of something — like a web page or campaign — to determine which performs better.

Traffic

→
Traffic, or web traffic, refers to the number of users who visit a website over a period of time.

Custom domain hosting

→
A Webflow service that lets you point a custom domain to your Webflow-hosted site.

Video

→
A Webflow element that displays externally hosted videos such as YouTube and Vimeo.

Domain

→
A domain, or domain name, is the unique address that directs to a website on the internet.

404 page

→
A 404 page is an error page a visitor sees when they try to access a non-existent or broken URL on a website.

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.

Cloneable site

→
Cloneable sites are open source (made available under the CC0 (“no rights reserved”) license). When you enable cloning, you allow any user to copy, modify, and use any part of your site for personal or commercial purposes.Sites with cloning turned off do not give others access to copy your site or open it in the Designer.

Height

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

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.

Display: inline

→
The display: inline CSS property is a display option that controls an element’s appearance and layout.

Form submission

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

Container

→
An element that contains content.

Multi-reference field

→
A CMS field used in Collections. Just like a reference field, the multi-reference field lets you reference other Collections in your site. But it’s even more powerful, as it lets you reference multiple items within a Collection instead of just 1 item.

Null

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

Sidebar

→
A sidebar, typically positioned on the left or right side of a website or app, is a vertical component that contains supplemental information to enrich a webpage’s primary content.

Collection item

→
An individual item within a Collection. For example, in a “Blog Posts” Collection, the Collection items are individual blog posts.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more