Styling Links with CSS

and links made with the Text Link to New Window Action

For the time being, this has got to be the quick and dirty version of this topic. Hopefully I can come back later and expand on it. It’s a challenge, because this discussion must be broad enough to encompass much detail, but basic enough for the beginner to grasp. So if you are already familiar with this, be patient if my treatment is too simplistic  – and if you are a beginner and are frustrated with my explanations, please be patient… this stuff really can be learned and mastered.

I had never used the Text Link to New Window action, or the Text Link Style action for that matter. So this was a learning experience for me. And how!

The Text Link to New Window action uses javascript to create the link to the new window, and there is no actionable way to style that link… but like some other links, the text it generates takes on any paragraph-level styles that are applied to the text block the action appears in. From a CSS point-of-view, we can use that structure to attach our styles to.

In my example on the left, we give the text we want to affect the paragraph-level class style .link2new. This is only to give it a special identity so we can style it. It only has two attributes, text-align:left to make it a paragraph style and color:#000 (black). This is visually no different than the surrounding text, but is enough to make a browser identify that text with our class style.

In the section marked “CSS Styles Used Here…” you can click the style names to open screenshots of the Edit Styles windows. The extended attributes are linked to screenshots as well.

The next style, .link2new a, and .link2new a:hover complete the link appearance. The first gives the basic link appearance, the second the hover state look. I wish I could go into the whys just now, but I am so sleepy…

When I come back and finish this article, I’ll show how to do the visited and active states, though I do not think the visited will do much good as the new window opens outside of the history of the current window. Only opening in the same window or in a new tab will add that page to the history.

Also, I hope to cover a manual way to insert javascript code into a link to achieve the same effect as the Text to New Window action. Hint: all the links in the Styles section use this manual method. And finally, explain how to use javascript to close a popup window.

CSS Styles Used Here…

.close

font-size: 10px;

text-align: center;

.close a

color: #556b2f;

font-family: Verdana;

font-weight: bold;

background-color: #8fbc8f;

padding: 2px 3px;

.close a:hover

color: #adff2f;

background-color: #556b2f;

text-decoration: none;

.link2new

color: #000;

text-align: left;

.link2new a

color: #006400;

padding: 2px 3px;

.link2new a:hover

color: #8b0000;

background-color: #ffe4b5;

text-decoration: none;

This page was made with Freeway 4 Pro. No download file is available at this time.