- This topic has 3 replies, 3 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
I am using Simple CSS plugin.
The plugin has its own page in dashboard where you can enter CSS for your whole site.
But, also when you Edit individual pages, there is a Simple CSS section that lets you add CSS that applies only to that one page.
I was concerned about optimizing speed of my site.
Is it better to put all my added CSS into the single Simple CSS page?
Does adding CSS to individual pages with Simple CSS affect site performance? Such as there being more file requests, etc?
Customer Support
Hi there,
It should have minimal effect on the speed of your site – the best way to determine this is to run the site through speed tests before/after and see if it has any effects at all.
Keep in mind that SimpleCSS was created way before WordPress introduced Additional CSS field in the customizer.
So you the plugin isn’t very necessary now as you can target your CSS to each page using the page ID.
Let me know if this helps 🙂
From what you said it sounds like I do not need simple css, and it is recommended to use the built in WordPRess features – Additional CSS?
When you mentioned targeting a page ID, I was not clear what you meant.
I see that the page content has a unique section for each page under the Article tag of each page
For example, one pages content was in a tag : <article id=”post-40″>
Would I target that #post-40 in my css to only affect the content of that page?
Customer Support
Hi,
From what you said it sounds like I do not need simple css, and it is recommended to use the built in WordPRess features – Additional CSS?
That’s true. You’d want as few plugins as possible to have less bloat.
When you mentioned targeting a page ID, I was not clear what you meant.
All WordPress pages have a unique
page-id-##class added to its<body>tag.This is how a GeneratePress
<body>tag looks like:
https://share.getcloudapp.com/GGu25JK9That said, say for example, you only want to apply a certain styling to a specific page, you can do something like this:
body.page-id-1 div#page{ background-color: red; }This particular CSS only applies to the
<div id=page">of the page with a page id of “1”. (<body class="page-id-1")
- You must be logged in to reply to this topic.