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.