Change How Web Pages Look With Safari Custom Style Sheets

Hi, this is Gary with MacMost.com. Today let me show you how to use custom style sheets in Safari.

MacMost is brought to you thanks to a great group of more than 1000 supporters. Go to MacMost.com/patreon. There you can read more about the Patreon Campaign. Join us and get exclusive content and course discounts.

So when you look at a webpage like this one it's using two different things to determine exactly what the webpage looks like. First it's using the HTML which includes all of the content like the text and most of how everything is laid out and designed. But in addition to that there's something called Style Sheet. That determines what fonts are used, the colors and backgrounds and other things. There is a lot of overlap between HTML and CSS but those are usually how the two are used. Now a webpage like this will have one HTML page but may have several style sheets. There may be a main style sheet for the site and there may be one specific to this type of page and maybe even one specific to this page itself. But you can also add your own style sheet on top of that. Your own Custom Style Sheet that will change how this page  looks. It's not something most people will generally use but the option has been there, in Safari, since the beginning of Safari. 

So if you go to Safari, Preferences and then to Advanced you'll see here Style Sheet. It will usually say None Selected. But you can select one and assign your own custom style sheet. It will change how this page looks. So let's use a custom style sheet here to get rid of the green and blue backgrounds that you could see here and maybe even change the color of the text just a little bit. To do so we're going to have to create a style sheet which is usually something done by web developers. We're just going to create a very simple one in TextEdit just as an example. 

So in TextEdit I've created a new document and I'm going to go to Format, Make Plain Text to make sure it's a plain text document. Now here's where I'll create my Style Sheet. Usually you start with an element like say Body and then you use a Curly Bracket and then you define the properties of that element. So, for instance I can do Background colon and then use a color to assign for the background. So colors use the little pound or hash symbol and then six hexadecimal digits. So the first two are red, the second two are green, and the third two are blue. So all zeroes would be black. If I were to put FF for green now we have a bright green color. So let's use that as an example just to see how this works. Then you close the curly brackets and that's all you need for a style sheet. So let's try that.

I'm going to Save it. I'm going to create a New Folder here called Custom Style Sheets and just call this one Test. I'm going to be very careful to change the file extension from .txt to .css. That's for Cascading Style Sheet. So we'll Save this out. It's going to prompt us to make sure we want to use something other than .txt. We'll say yes. Now we have that one there. Let's go into Safari, Preferences and I'll select that Style Sheet and there it is. I'll choose it. Now in order to get this to actually work we'll need to Quit Safari and then launch it again. But it's still not going to do anything. Why? Because our CSS isn't quite right. In that page, sure we've changed the Body background color to green but the page is filled with different elements everywhere and each of those has its own background color assigned. So we need to go deeper than just changing the body color because the Body is completely hidden behind all these elements. 

So we're going to put a comma here and say all div, divisions of the page, a special HTML tag that's used throughout web development. That should also be set to green. So now when we use that and we'll Quit and Relaunch Safari and we see that now all of the divs  now actually have a green background. But there are other elements here are aren't divs that aren't going to obey that. So how do we get everything to have a green background. Well you could simply put an asterisk there and that will be everything. So now we'll Quit Safari, launch it again, and we still see we haven't gotten everything to be the green background. What we're going to have to do is force a green background by adding exclamation point important. Because what's happening here is our style sheet is like the lowest priority. So other things are going to override it. But by putting important we should now be the thing that overrides others. So let's Quit again. Launch Safari and now we can see, indeed, everything is green. 

So let's find something nicer than green here. I'm going to go to HTML dash color dash codes dot info. There are tons of different websites that just give you color codes and we can find something nice here like maybe something like this color or even something a little more like that so that's F7F2E0. So let's go and set the color to that. Let's relaunch Safari and now we get this light background here. Now we have a lot of contrast between the text and the background. So let's tamper down the text color a bit. To do that I'm going to put another asterisk so it changes text everywhere and just simply change color, which will be the text color, so the text color to instead of all zeroes which would be black, I'm going to do all 3's which will be a kind of gray. Let me do !important and Save that. So now we'll Quit Safari and launch it again. Now the color is a nice gray and it has changed everything including the links. So you can see how I've drastically changed how this website looks and I can adjust those colors and make it easier to read.

I could even adjust the font. Let's change the font to a Serif font rather than a Sans Serif font and even make it larger. So here I'm going to use the asterisk again and I'm going to change the font family and I'm simply going to state Serif so it will choose the default Serif font. I could do something like Times, for instance, there if I wanted to. I'm going to say !important. Let's just do that for now. When I Quit and launch Safari again you could see now it's a nice Serif font. Let's make it a little bit bigger. I'll change the size to something specific like, let's say, 14 pt. Now we'll Quit and launch it again and now we can see we get a larger size. But everything set to the same size. 

So if you really want to get specific for how everything looks on the page you need to go to the Develop Menu, which you may or may not have turned on. You have to go into Safari Preferences and under Advanced there's Show Develop Menu in Menu Bar. You can look at the Page Source or the Web Inspector. Then with that on you can select specific things. Inspect Element to see exactly what element this is. In this case if I look through this and I know what I'm doing I can see that this is an H2 here. So I could set a H2 element to be a larger size for that. It gets pretty complex if you don't know CSS and HTML. The other problem you're going to have here is if you go to another site, like this one, you could see it change that site as well. The results aren't always great. You can see here with all the background set to just be a solid color all the graphics are missing from the Apple site. So it's not kind of ideal to have this set and just browse the internet with it. 

So you may be asking is there a way to set it on a per site basis. There is but not built into Safari. You need to add a Safari extension. Fortunately there are a few that do this and there's even one that's free. So search for Tamperish in the Mac App Store. You'll see Tamperish for Safari which allows you to set styles on a per site basis. I've already got that installed so I can go to Safari, Preferences and you could see I have it here under Extensions. I'll enable it, turn it on, and then there are a few things you have to do to set it up. It appears here and you could see it says Folder Not Set. I actually have to run the Tamperish app and then you have to set the folder where these style sheets would be. Fortunately I've created a custom style sheet so I have that setup. So I will choose that one. Now in that folder I've got my Test file. The way that this works is you would create a subfolder and name it after the website. So I'm going to name it Wikipedia.org. Going to take this style sheet here and I'm going to put it in the Wikipedia.org folder. So now when I go in Safari Preferences here and I look under Advanced it says None Selected because I removed that file. So it can't find it anymore. You could see now things look normal. If I go to any other website you could see it doesn't actually use any special style sheet. But if I go to that one that's inside that folder it is going to use that special style sheet. So the style sheet is now only for Wikipedia.org. It won't be applied to any other sites. 

So that could come in very useful especially if you do a lot of research on the web and you go to a particular site all the time for that research and you don't like the font that is being used, you don't like the background color, or something else about it. It can make it a lot easier to see and browse through that particular website without effecting any others.