CSS Parameter

The css parameter allows you to inject additional CSS styles into the page. This is useful for styling HTML content or modifying the appearance of a webpage being captured.

Specifications

Property	Value
Type	string
Required	No
Default	null
API	Both HTML/CSS and Screenshot APIs

Description

The CSS parameter can be used to:

• Add styles to HTML content without embedding them in the HTML
• Override existing styles on a webpage being captured
• Remove unwanted elements from screenshots (cookie notices, popups)
• Modify webpage appearance for better captures

Examples

Basic CSS Styling

{
    "html": "<div class='container'><h1>Hello World</h1></div>",
    "css": ".container { padding: 20px; background: #f0f0f0; } h1 { color: blue; }"
}

Modifying Screenshot Styles

{
    "url": "https://example.com",
    "css": "body { font-family: Arial, sans-serif; } .header { background: #fff !important; }"
}

Webpage Modification Examples

The CSS parameter is particularly useful for cleaning up webpage screenshots by removing unwanted elements. Here are some common use cases:

Common Cookie Notice Selectors

{
    "url": "https://example.com",
    "css": "#cookieBanner, #cookie-banner, .cookie-notice, .cookie-consent, .cookie-popup, #gdpr-banner, .gdpr-banner { display: none !important; }"
}

OneTrust Cookie Banner

{
    "url": "https://example.com",
    "css": "#onetrust-banner-sdk, .onetrust-pc-dark-filter { display: none !important; }"
}

CookieBot Banner

{
    "url": "https://example.com",
    "css": "#CybotCookiebotDialog, .CookieDeclaration { display: none !important; }"
}

Osano Cookie Banner

{
    "url": "https://example.com",
    "css": ".osano-cm-window, #osano-cm-dom-info-dialog { display: none !important; }"
}

Quantcast Banner

{
    "url": "https://example.com",
    "css": ".qc-cmp2-container { display: none !important; }"
}

Cookie Law Info Banner

{
    "url": "https://example.com",
    "css": ".cli-modal-backdrop, #cookie-law-info-bar { display: none !important; }"
}

Removing Other Common Elements

Chat Widgets

{
    "url": "https://example.com",
    "css": ".intercom-frame, #drift-frame, #crisp-chatbox, .fb_dialog, #chat-widget { display: none !important; }"
}

Newsletter Popups

{
    "url": "https://example.com",
    "css": ".newsletter-popup, .signup-modal, #subscribe-modal { display: none !important; }"
}

Fixed Headers

{
    "url": "https://example.com",
    "css": ".fixed-header, .sticky-header { position: relative !important; }"
}

Enhancing Screenshot Quality

Dark Mode Compatibility

{
    "url": "https://example.com",
    "css": "@media (prefers-color-scheme: dark) { body { background: white !important; color: black !important; } }"
}

Improved Text Rendering

{
    "url": "https://example.com",
    "css": "* { text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; }"
}

Disable Animations

{
    "url": "https://example.com",
    "css": "* { animation: none !important; transition: none !important; }"
}