[zengravy]

I know absolutely nothing about writing CSS stylesheets. That being said, since Safari allows you to set a stylesheet to use, would it be possible to create a stylesheet that sets the minimum font size at, say, 11 points, and disables link underlining?

Anyone here proficient enough with CSS stylesheets to whip up a quick one?

zen

[Worst. Episode. Ever.]

I'll second that request.

Not being able to turn off link underlining is my only major complaint about Safari.

[sinebubble]

I saw this on Apple's discussion board. Sorry, but I don't recall who originally posted the information.

To eliminate the underlining of links, create a new file called nounderline.css in ~/Library/Safari. Put the following text in the file and save it:

a { text-decoration: none }

Then, in Safari, select Preferences -> Appearance -> Style Sheet. Use Other and find nounderline.css. The Style Sheet change should take place immediately.

[HorseyBoy]

I don't know anything about CSS stylesheets either, but I do know that you can set the minimum font size of Safari by adding this line to com.apple.Safari.plist (~/Library/Preferences/):

<key>WebKitMinimumFontSize</key>
<integer>11</integer>

The integer value sets the chosen size.
Hope this helps.
HorseyBoy

(PS I found this buried somewhere in another post here on MacNN . . .)

[neilw]

By gum, that was easy. What an improvement. Gotta learn me some CSS one of these days.

I think I would like to try the behavior where links get underlined only on mouseover; anyone know how to do that offhand?

[KidRed]

It's-
<style type="text/css">
<!--
a:link { text-decoration: none }
a:hover { text-decoration: underline }
-->
</style>

I think that's it.

You guys suck tho, messing with a creation that web designers spent countless sleepless nights designing just to go and throw your own style into the mix. To each his I guess

[neilw]

OK, this seems to work nicely:

a { text-decoration: none }
a:link { color: #aa0000 }
a:visited { color: #0000aa }
a:hover { text-decoration: underline }

Note that I like my unvisited links to be red, visited links blue (never could understand why the browsers default it the other way). Installed this as my style sheet and I'm off and running. Not sure if I'm going to keep the "hover" behavior but I'll try it for a while.

Note that as far as I can tell, Safari seems to not re-read a particular style sheet until the program is restarted, so if you want to fiddle you have to either keep changing the name of the file or else keep restarting the program.

I'm a style sheet neophyte; if someone can point out a better way to do this, I'm all ears.

[KidRed]

Because red is stop, you've been there already so 'stop' from clicking on the link again.

[neilw]

[double post, deleted]

[AKcrab]

Originally posted by HorseyBoy:
I do know that you can set the minimum font size of Safari by adding this line to com.apple.Safari.plist (~/Library/Preferences/):

<key>WebKitMinimumFontSize</key>
<integer>11</integer>

The integer value sets the chosen size.

EXCELLENT. You just saved my eyesight.

[neilw]

Because red is stop, you've been there already so 'stop' from clicking on the link again.

Is that really the reasoning? Seems like quite a stretch to me. If that were the case, unread links would be green. Red is a hot color, jumps out, like unread links should. Blue tends to recede, appropriate for links already visited.

In any case, that is a discussion for another forum....

You guys suck tho, messing with a creation that web designers spent countless sleepless nights designing just to go and throw your own style into the mix. To each his I guess

Not sure if this was supposed to be humor, but fiddling with the style sheet this way only seems affects the default operation of the *browser*, not override a particular web page. So I'm not sure I understand the criticism. These are options that other browsers have in their preferences. I suspect Safari will too eventually; this is an effective workaround in the meantime.

[sinebubble]

Originally posted by KidRed:
It's-
<style type="text/css">
<!--
a:link { text-decoration: none }
a:hover { text-decoration: underline }
-->
</style>

Hm. Didn't work for me. This did:

a:link { text-decoration: none }
a:visited { text-decoration: none }
a:hover { text-decoration: underline }

Apparently order does matter. If I put "visited" below "hover", my visited links were underlined.

[Xeo]

Originally posted by KidRed:
You guys suck tho, messing with a creation that web designers spent countless sleepless nights designing just to go and throw your own style into the mix. To each his I guess

Don't worry. It doesn't override CSS set by the web designer. I don't know if it overrides settings in the <body> tag, but if the CSS is already there, it's what is used. This is just the "default look" which I'm very happy about.

Now, how some of you actually prefer non-underlined text for links is beyond me.

[chezpaul]

I feel stupid but I tried to create a file in Texedit (to create the nounderline.css file) but Safari won't see it... With which program do I create my stylesheet ?

[Xeo]

Originally posted by chezpaul:
I feel stupid but I tried to create a file in Texedit (to create the nounderline.css file) but Safari won't see it... With which program do I create my stylesheet ?

TextEdit is fine. Make sure it's a plain text file and not an RTF file. The new window will say Untitled.rtf or Untitled.txt for RTF and plain text respectively. You can change a document from one type to the other in the "Format" menu (Make plain text for plain text or Make rich text for RTF). Then, when you save it, name it whatever.css and choose that file. It should work fine.

[Millennium]

OK, a quick overview of CSS:

First, a note: anything between a set of slashes and asterisks /* like this */ is called a comment. These are harmless, and are always ignored. I'll be using these in my examples to explain what I'm doing; you can cut and paste everything right into the stylesheet and it won't hurt anything.

The format of a CSS rule is pretty simple. It goes like this:
[code]selector {
property:value;
property:value;
} [code]
...and so on. You can have as many of those property:value pairs as you want within a single rule.

A selector is what determines what this rule applies to. The simplest of this is the tag selector, which is just the name of the tag you want to apply this to. So, for example, a selector of "a" will apply to all a tags, a selector of em will apply to all em tags, and so on. This is most of what we'll be using.

You'll notice that people here have used selectors like a:link, a:hover, and so on. That part after the colon is called a pseudoclass, and it affects whatever has been selected in some altered state. Links typically use four of these: link for normal links, visited for visited links, hover when the mouse is over the link, and active for when the mouse is down over the link. Note that in Safari and Gecko you can actually put hover and active on any tag, not just links. In other browsers this doesn't do anything.

Actually, Safari doesn't support active yet, even for links. It does not harm the browser to add it in, though, and so we will, since Safari will probably support :active by the time it reaches 1.0. Then, our stylesheet will work without any changes.

There are many other selector types you can use. But we won't be going into those today.

Onward to property:value pairs. These should be pretty self-explanatory. Properties are aspects of the tag. Every tag actually has the same properties. Safari (and Gecko) actually have style sheets which they use internally, to decide what, for example, an i tag (italics) should look like.

A value is just the value which the property takes on. Depending on the property, there may be many kinds of values, but we'll stick to simple ones today.

Now, how to make links not underlined? Well, there are four things to keep in mind: namely, the four states a link can have. So, we'll select all four at once. Then, we'll modify the text-decoration property (which controls underlining) to none, to remove the underline. Our code looks like this:

Code:
a:link,
a:visited,
a:hover,
a:active {
    /* Remember, a:active doesn't do anything yet */
    text-decoration: none; 
}

Just save that in a file like no-underline.css, tell Safari to look there, and you're done.

Let's play with this a little, though. Suppose you want links to be in boldface, rather than underline. Boldness is controlled by the font-weight property. So, let's add that into our CSS:

Code:
a:link,
a:visited,
a:hover,
a:active {
    text-decoration: none; 
    font-weight: bold;
}

...and we're done; your links will now be boldface instead of underlined, unless the page designer has defined otherwise.

Is it possible to make your own user.css override what the page designer wants to do? Actually, yes! It requires one minor addition to your property values, though: after the value but before the semicolon, you put !important (don't forget the exclamation point) to signify that this really means a lot to you. So, let's say we have some psychopathic hatred for underlining, but don't mind if the designer undoes our boldfacing:

Code:
a:link,
a:visited,
a:hover,
a:active {
    text-decoration: none !important; 
    font-weight: bold;
}

I've thought about writing a CSS tutorial. It really is fascinating, and easy once you understand the basic concepts.