How to Apply a Custom CSS Style Sheet Across Websites in Safari on Mac

Modern websites often feature aggressive layouts, intrusive floating banners, low-contrast colour schemes, and small typography that degrade readability. While third-party browser extensions (such as custom user-script or style managers) allow users to inject CSS, they consume additional system memory and introduce potential privacy risks by demanding broad permissions to inspect web content.

Safari on macOS provides a clean, native alternative: User Style Sheets. Built directly into Safari’s advanced settings, this feature allows you to link a single local .css file that the browser automatically evaluates and applies across every website you visit.

Creating a Custom User CSS Style Sheet

Before enabling the feature in Safari, create a dedicated CSS file in a convenient, persistent local directory (such as your Documents folder):

mkdir -p ~/Documents/SafariStyles
nano ~/Documents/SafariStyles/custom-style.css

Because website developers apply author styles that carry high CSS specificity, your user style sheet rules must include the !important declaration to guarantee precedence according to CSS cascading rules.

Essential CSS Rules for Readability and Layout Control

You can add rules tailored to your browsing preferences. Here are several practical enhancements commonly applied to improve web readability:

1. Enforcing Clean System Fonts and Line Spacing

Override arbitrary web fonts with macOS system fonts and improve line spacing for extended reading:

body, p, li, article {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  line-height: 1.6 !important;
  font-size: 17px !important;
}

2. Eliminating Floating Sticky Banners and Popovers

Suppress common floating headers, newsletter slide-ins, and sticky footers that clutter small laptop screens:

/* Suppress floating newsletter and overlay banners */
div[class*="newsletter-modal"],
div[class*="cookie-banner"],
div[class*="sticky-banner"],
div[class*="floating-banner"] {
  display: none !important;
}

3. Enforcing High-Contrast Text

Many modern websites use light grey body text that strains eyesight. Enforce solid dark text across paragraphs and headings:

p, span, li, h1, h2, h3, h4 {
  color: #1a1a1a !important;
}

4. Customising Focused Input Outlines

Improve accessibility by making the active form element clearly visible when tabbing through web pages:

input:focus, textarea:focus, select:focus {
  outline: 3px solid #007aff !important;
  outline-offset: 2px !important;
}

Linking the Style Sheet in Safari Settings

Once you have written and saved your custom-style.css file, attach it to Safari:

1. Open Safari on macOS.
2. Click Safari in the menu bar and select Settings… (or press Command + ,).
3. Navigate to the Advanced tab.
4. Locate the Style sheet setting (which defaults to None Selected).
5. Click the dropdown menu and select Other….
6. Browse to ~/Documents/SafariStyles/custom-style.css and click Choose.

Testing and Auditing Active Styles

To verify that your custom styles take effect:

1. Navigate to any active website or reload an open tab.
2. Notice that typography, colours, and layout rules reflect your CSS declarations immediately without requiring a browser restart.
3. If developer tools are enabled (via Settings > Advanced > Show features for web developers), press Option + Command + I to open Web Inspector.
4. Select any text element and review the Styles sidebar. Your rules will appear labelled under User Agent / User Stylesheet, confirming that your declarations are actively overriding author CSS.

Updating or Disabling the Custom Style Sheet

To modify your styling rules, simply open ~/Documents/SafariStyles/custom-style.css in any text editor, make your changes, and save the file. Safari applies changes dynamically upon the next page reload.

To temporarily disable custom styling, return to Safari Settings > Advanced > Style sheet and change the dropdown setting back to None Selected.