Imagine I want to visit webmaster.stackexchange.com (or an other website) everyday but I want to change the blue color of header (change it to red for instance).
Is it possible to force personal css styles when I visit a website? If so, how can I do it? Maybe a web browser tip or a plugin? (I use Chrome)
I would like an automatic solution, change css with web browser console (F12 on Chrome) for each page I visit is not interesting.
Since 2018 in Chrome (65) the browser's integrated DevTools has a feature called Local Overrides. As such, there is no need for an add-on or extension like StyleBot, Stylish or Greasemonkey.
Local Overrides allow rewrites of CSS, JS and DOM on any live site. Changes are saved in a local folder and they override the contents of the live environment.
This can be accessed under Developer Tools > Sources >> Overrides
This allows you to select a custom local folder that will contain CSS and JS that will override the current website's own CSS and JS.
In 2017 Stylish became very heavy and full of bloat features so I decided to move away from it.
I have created an alternative - Styler extension - it's lightweight and has minimal style but powerful. You can add custom CSS and JavaScript/jQuery code.
Styler Extension for Google Chrome
Why I love it and use it on daily basis - mostly because of autosaving and auto-syncing between all Google Chrome browsers (on Mac, Win and Linux).
Greasemonkey ... a google search pointed me to Tampermonkey (https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en)
After Stylish's data stealing scandal, using a closed source browser extensiosn has become too risky, unless it's from a widely known softwaare developer... which it's not the case for many of those extensions... so for things I can automate myself, like making changes to CSS as in your example, I went all the way with open-source javascript injection engines, and among all of them in 2023 it's hard to not recommend the superb Violent-Monkey. It features the nicest and most complete UI compared to the alternatives I've tried, and it's got a very well written documentation.
As other have said here, these injection engines are easily capable of altering the CSS... For example following is the code for a script which fixes the awful Instagram white splash-screen which flashes on each page reload:
// ==UserScript==
// @name fix-instagram-white-splashscreen
// @namespace Violentmonkey Scripts
// @match https://www.instagram.com/*
// @grant GM_addStyle
// @version 1.0
// @author AUTHOR-NAME
// @description 8/13/2023, 12:35:17 PM
// ==/UserScript==
GM_addStyle (
`
#splash-screen {
background-color: #333 !important;
}
`
);
That's it. Note that the header part is mostly autopopulated with Violent-Monkey and it can also be modified by the UI without needing to remember all the flags. It's really a powerful tool and I happy I am learning to use it because it can come handy in many different use cases... and for many of those there may be scripts written by other users alrady, as as for Grease Monkey and the others, but I recommend to only use them if you can read their code yourself, because you never know...
As minimalistic as possible
Chrome extension - Custom CSS by Denis
https://chromewebstore.google.com/detail/custom-css-by-denis/cemphncflepgmgfhcdegkbkekifodacd
Another great option that's been around for a while: https://amino.dev/
