Tip: Use stylesheets to customize web page behavior

Cascading style sheets (CSS) are extensively used in websites to apply styling properties to specific HTML tags or categorized classes and tag IDs. This is why on many sites you will see items like links appear in custom colors instead of the default underlined blue text. In Safari you can easily include a user-supplied style sheet in which you can set custom styles for web pages that do not already have styles assigned for tags, allowing you to customize link colors and cursor behaviors, just to name a few.

Styling with CSS and HTML can be as simple as applying single properties to tags in a small list, to a massive undertaking that includes multiple site-specific coded and linked sheets. The basics of CSS are simply a text page that lists style properties for each desired tag, which the browser then appends to the website's currently loaded styles (the site's style sheet takes priority, so duplicate properties on user style sheets are ignored):

tag:class[propertySelector] {property:value; property:value; ...}
tag:class[propertySelector] {property:value; ... }
...

The idea is for the specific tag, further specified by its class and other property selectors in the HTML code for the tag, you will be applying the properties and corresponding values in the curly brackets. For instance, to make all paragraph tags have red text, you would use the following:

p {color: red}

NOTE: while "red" can be used, more commonly a specific color is set by its hexadecimal code (look them up here).

Using this setup, we can do fun things like make links which open a new browser window have a crosshair over them, instead of the normal pointer hand. Additionally, we can change the color of the links on websites that do not have these properties set for their links. To change the pointer to a crosshair for links that open in a new window, do the following steps:

1. Open TextEdit and in the "Format" menu choose "Make Plain Text"

2. Copy and paste the following code to the document

   a:link[target="_blank"],
   a:visited[target="_blank"],
   a:link[target="_new"],
   a:visited[target="_new"] {
   cursor: crosshair }

3. Save the document with the ".css" suffix (ie, "crosshair.css").

4. Open Safari and go to the "Advanced" preferences

5. In the "Style Sheet" menu, choose "Other..." and locate and select your saved style sheet. Then quit and relaunch Safari (or close all windows and empty Safari's cache), and you should be good to go.

This procedure can be used to color links as well, such as with the following code:

a:link {color: #0000FF}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}

This will cause links to be bright blue when not visited, bright green when visited, and bright purple when you hover your mouse over them. The colors can be changed by putting in the appropriate hexadecimal code for the color.

Questions? Comments? Post them below or email us!
Be sure to check us out on Twitter and the CNET Mac forums.