- Filters/Actions For Post
- Spectra Patterns
- Contact Form 7: Checkbox / Radio / Acceptance Control
- Getting Started With Spectra
- WP – Search
- Create Contact Forms
- Import Single Pages, Templates, & Block Patterns
- Assets API For Third-Party Plugins
- Copy & Paste Style
- Load Google Fonts Locally
- Troubleshooting: Missing Icons
- Contact Form 7: Multiple Column Fields
- Unable To Style Contact Form 7
- Tab Index For Multiple Gravity Forms
- Manually Install Spectra Via FTP
- Enable/Disable Design Library Button
- Update Folder File Permissions
- Resolving Container Layout Conflicts
- Database Update Instructions (Below 2.0.0)
- Using Heading Block
- Buttons
- Post Grid
- Content Timeline
- Social Share
- Google Map
- Add Testimonials
- Info Box
- Section
- Team
- Icon List
- Price List
- Post Masonry
- Post Carousel
- Post Timeline
- Call To Action
- Advanced Columns
- Blockquote
- Marketing Button
- Table Of Contents
- How-to Schema
- FAQ’s: Schema/Accordion
- Inline Notice
- Exclude Heading From TOC
- Review Schema
- Lottie
- Taxonomy List
- Tabs Block
- Block Display Conditions
- Star Rating
- Masonry Image Gallery
- Wireframe Blocks
- Copy & Paste Style
- Container Flex Property
- Default Content Width
- Heading Block
- Image Block
- Buttons Block
- Container Block
- Responsive Conditions
- Taxonomy Styling Options
- Block Presets
- Image Gallery
- Counter Block
- Modal Block
- Registration Form Block
- Dynamic Content Extension
- Slider Block
- Pagel Level Custom CSS
- Countdown Pro
- Slider Custom Navigation
- Loop Builder
- Animations
- Login Form Block
- Global Block Style Extension
- Create Popups
- Grid Builder
- Using Dynamic Content in FSE Templates
- Pixabay Image Search Feature
- Â Getting Started with Instagram
- Advanced Loop Builder
- Transparent / Sticky Header
- Change Site Logo
- Change Global Styles
- Disable Title on Posts & Pages
- Transparent / Sticky Header For Single Page / Post
- Change Header & Footer Patterns
- Custom / Google Fonts
- Reset Global Default Styling
- Manually Install Spectra One Via FTP
- Enable / Disable Header & Footer On Specific Pages / Posts
Custom CSS On Page Level
This guide will walk you through the steps to add Custom CSS to individual pages on your WordPress site using the Spectra plugin.
We’ll explain what Custom CSS is, why you might want to use it, and provide a simple, step-by-step process to help you get started.
Additionally, we’ll share some example CSS codes and tips to keep in mind while customizing your pages.
What is Custom CSS?
Custom CSS allows you to change the appearance of a specific webpage (page/post) by adding your own styles. This can include colors, fonts, margins, and more.
Why Would I Want to Use Custom CSS?
You might want to use Custom CSS to make your page stand out, match your brand’s style, or make specific adjustments that aren’t possible with the default settings.
How Can I Add Custom CSS to a Single Page?
One of the advantages of Spectra is its many customization features. This includes adding custom CSS to each individual page by clicking on the Spectra Page Settings icon. You can add your own CSS code here to customize the page as per your expectations.

What Are Some Examples of Custom CSS?
Here are a few examples of what you can do with Custom CSS:
Change the Background Color:
body {
background-color: #f0f0f0;
}
Customize Font Styles:
h1 {
font-family: 'Arial', sans-serif;
color: #333333;
}
If you need more help or run into any issues, please feel free to leave a comment below.
Note:
When targeting your specific element, add selector before the tags and classes you want to exclusively target, i.e: selector a { color: red;}
We don't respond to the article feedback, we use it to improve our support content.