Global Styles embed

CSS snippets

Text clarity

Modifies default browser rendering method for better text clarity.

<style>
/* Make text look crisper and more legible in all browsers */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

Text looks better on the page with this snippet.

Focus state for keyboard navigation

Creates one focus style for all focusable elements in the build at once.

<style>
/* Accessible focus styles for keyboard users, customizable via the Variables panel */
[tabindex]:not([tabindex='-1']):focus-visible,
button:focus-visible,
a:focus-visible,
[role='button']:focus-visible,
input[type='file']:focus-visible {
  outline: var(--_sizes---focus--width, 2px) solid var(--_theme---system--focus-state, #005fcc);
  outline-offset: var(--_sizes---focus--offset, 2px);
}
</style>

It targets links, buttons, file inputs, and any element with a tabindex attribute. Elements set to tabindex="-1" are excluded because they cannot be reached with a keyboard.

Outline width, color, and offset come from the Variables panel. Update the focus variables in Theme and Sizes to change the focus style across the entire project.

Webflow allows us to style the focus-visible state (called "Focused (keyboard)" in the states dropdown) for any element separately. Use it if you want to override the default style we created with the snippet.

Text selection

Styles the highlight color of selected text.

<style>
/* Text selection styling, customizable via the Variables panel */
::selection {
  background-color: var(--_theme---system--selection-background);
  color: var(--_theme---system--selection-text);
  text-shadow: none;
}
::-moz-selection {
  background-color: var(--_theme---system--selection-background);
  color: var(--_theme---system--selection-text);
  text-shadow: none;
}
</style>

Background and text color come from the Variables panel. Update the selection variables in Theme to match the brand. The text shadow is removed so selected text stays readable on every background.

The ::-moz-selection rule repeats the same style for Firefox. Both rules are needed because Firefox does not read the standard ::selection rule.

Pointer cursor for interactive elements

Sets the pointer cursor on buttons, links, form controls, and select fields.

<style>
/* Pointer cursor for essential interactive elements
Uncomment to enable. Keep this message for future handoff clarity. */
/*
button,
a[href],
input[type='button'],
input[type='submit'],
input[type='checkbox'],
input[type='radio'],
input[type='file'],
select,
[role='button'] {
  cursor: pointer;
}
*/
</style>

This snippet is turned off by default. Remove the comment tags to turn it on.

Keep the note inside the snippet. It tells the next person working on the project that the option exists and how to enable it.

Form element reset

Removes default browser styling from inputs, textareas, and select fields.

<style>
/* Reset default browser styles for form elements, especially on Apple devices.
Uncomment to enable. Keep this message for future handoff clarity. */
/*
input,
textarea,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  background-image: none;
  background-color: transparent;
}
*/
</style>

Apple devices add their own rounded corners, backgrounds, and shadows to form elements. This snippet removes them so form fields start from a clean base and follow the styles we set in Webflow.

This snippet is turned off by default. Remove the comment tags to turn it on.

Inherit typography styles

Makes links, inputs, and Webflow's built-in elements inherit color and text decoration from their parent.

<style>
/* Make the following elements inherit typography styles from their parent.
Note: This will override Webflow's base styles (e.g. "All Links" won't work as expected in Designer).
Uncomment to enable. Keep this message for future handoff clarity. */
/*
a,
.w-input,
.w-select,
.w-tab-link,
.w-nav-link,
.w-dropdown-btn,
.w-dropdown-toggle,
.w-dropdown-link {
  color: inherit;
  text-decoration: inherit;
}
*/
</style>

Webflow applies hardcoded styles to these elements. Links get their own color and underline, and form inputs never follow the body font styles. With this snippet, these elements inherit from their parent instead of being overridden one by one.

We consider this an advanced option because it can lead to unexpected behavior. For example, we will not be able to select "All links" and change their color. The "All links" style update will not change anything because we are no longer working with the hardcoded values set to these elements. We override this option by using inherit.

This snippet is turned off by default. Remove the comment tags to turn it on.

Highlight empty links

Adds a red outline to links that point to an empty href.

<style>
/* Highlight empty links, can be used to find broken links
Uncomment to enable. Keep this message for future handoff clarity. */
/*
.wf-design-mode a[href='#']:not(.w-lightbox):not([class='pagination']) {
  outline-color: red;
  outline-style: solid;
  outline-width: 3px;
  outline-offset: 5px;
}
*/
</style>

Use it to find links that were never connected to a page or URL. Lightbox links and pagination links are excluded because they use an empty href by design.

The snippet is scoped to wf-design-mode, so the outline appears in the Designer only. It never shows on the published site.

This snippet is turned off by default. Remove the comment tags to turn it on.

Rich Text top margin removal

Removes the top margin from the first element in Rich Text.

<style>
/* Remove top margin from the first element inside any Rich Text block */
.w-richtext > :not(div):first-child,
.w-richtext > div:first-child > :first-child {
  margin-top: 0 !important;
}
</style>

For example, we want our ^H2 to have ^{margin-top: 4rem}. This is the top margin we want throughout the entire Rich Text element. However, we do not want this ^margin-top for the first element of the Rich Text. The ^4rem of margin creates an unwanted space between the top of the Rich Text element and the first ^H2 text.

The "not" declaration is a special failsafe for our Table of Contents Attribute solution.

Rich Text bottom margin removal

Removes bottom margin for the last element in Rich Text.

<style>
/* Remove bottom margin from the last element inside any Rich Text block */
.w-richtext > :last-child,
.w-richtext ul li:last-child,
.w-richtext ol li:last-child {
  margin-bottom: 0 !important;
}
</style>

For example, we want our ^Paragraph to have ^{margin-bottom: 0.5rem}. This is the bottom margin we want throughout the entire Rich Text element. However, we do not want this ^{margin-bottom} for the last element of the Rich Text. The ^0.5rem of margin creates an unwanted space between the bottom of the Rich Text element and the final ^Paragraph text.