Apply Formatting to any Element with an href Attribute

[Evetsm]

I want to make links stand out from other text.

To do this, I thought I could create a selector that targets any element with an href attribute.

I've tried a number of methods, such as the following:

Code: Select all

[href]
{
	/* Styling here */
}

and:

Code: Select all

MadCap:xref[href]
{
	/* Styling here */
}

I have not been successful. Can anyone tell me how to achieve what I'm after?

Cheers!

[Paulie]

Hi there,

Check this page out for an example of what you need to do to get your regular links working:
http://www.w3schools.com/css/css_pseudo_classes.asp

[NorthEast]

You are on the right track with the selectors in your first post - rather than using pseudo classes.

The first [href] {} example would actually work in web outputs viewed in a browser, although it probably doesn't work in the the XML editor or PDF outputs.

[Paulie]

You are on the right track with the selectors in your first post - rather than using pseudo classes.

The first [href] {} example would actually work in web outputs viewed in a browser, although it probably doesn't work in the the XML editor or PDF outputs.

Thanks Dave.

As a learning experience, why would you recommend using the [href] selector in this instance over pseudo classes? I can understand why you would want to use this method, if an attribute can be used by multiple html elements. However, my understanding is that the href attribute is only really used by <a>, <link> and <area> elements. Of those three elements, you would only realistically be looking to style <a> tags this way, so pseudo classes would be my preferred method (due to the ability to individually style the different link states).

This isn't intended as a criticism, more of an opportunity to learn from your thought process. There is probably something really simple that I am overlooking.

[Evetsm]

Thanks Dave and Paulie.

In addition to hearing Dave's thoughts on Paulie's question, I'm wondering the following. Apparently the styling will be applied to HTML5, but not PDF. Do you folks know how to style links in PDFs?

Thank you.

[Paulie]

Thanks Dave and Paulie.

In addition to hearing Dave's thoughts on Paulie's question, I'm wondering the following. Apparently the styling will be applied to HTML5, but not PDF. Do you folks know how to style links in PDFs?

Thank you.

I had a quick test for you. Dave is right that the [href] selector does not appear to work for PDF documents. The pseudo classes that I mentioned above appear to work for all mediums including PDF, so that might be an option that you can try.

Here is a really basic example:

Code: Select all

a:link,
{
	color: deeppink;
}

Alternatively, you might want to see what Dave comes back with. He may well have a better suggestion.

[NorthEast]

As a learning experience, why would you recommend using the [href] selector in this instance over pseudo classes?

Just because Evetsm mentioned he wanted to "create a selector that targets any element with an href attribute" - so you would do that using the attribute selector.

I'd kind of assumed Evetsm would already know how to style links (including using pseudo classes), but specifically wanted to style links with certain href attributes. But I don't know, maybe that's a red herring and the question was actually about the basics?

[Evetsm]

Thanks Dave and Paulie.

Apologies -- I'm still new to CSS and I was going in circles because I did not define my requirements. Perhaps also my examples muddied the waters.

Here is what I'm after:

• The goal is to make all types of links visually stand out from other text. From what I understand, "all links" comprises cross-references and hyperlinks. (I don't think there are any other types of links in Flare, but let me know if I'm mistaken.)
• The style must work for HTML and PDF.
• Writers must be able to selectively apply the style.

Thanks for bearing with me and helping with this.

Steve

[Paulie]

Okay. I'll walk through what I would do based on your requirements:

• Works for both HTML and PDF - In my mind this pretty much sends us down the path of using pseudo classes, as this is the only method I know of that works for both output types.
• Writers must be able to selectively apply the style - indicates that we want to create a class either for this style, or for the alternate style(s) (depending which one you want to be the default).
• Works for both regular links and cross references - Cross references require some handling in the PDF output. This is covered in the example below.

For testing purposes, set up a brand new empty Flare project and overwrite the default style sheet with the following:

Code: Select all

/*<meta />*/

/*Styles unvisited links and cross references in PDF documents */
a:link,
MadCap|xref
{
	color: deeppink;
	text-decoration: none;
}

/*Styles visited links in HTML outputs */
a:visited
{
	color: orange;
}

/*Styles hover links in HTML outputs */
a:hover
{
	text-decoration: underline;
}

/*Second class for an alternate link style */
a.other
{
	/*Even though this is empty, it needs to be here for the style to show up and be selectable in the Flare UI */
}

/*Alternate link color for the second class (all other settings are the same as the defaults above) */
a.other:link
{
	color: darkgreen;
}

Then, create a topic with a couple of links and cross references and build the outputs to see what happens. You should be able to use this test project to create something like you are trying to achieve. From there, paste the appropriate sections into your real style sheet and try it out for real (obviously, you will need to check the existing style sheet to make sure there are not any existing <a> or a:pseudo class configurations that override what you have added).

[Evetsm]

Paulie,

Just a preliminary comment: Thank you so much for the detailed response!!!! Again, thank you!

I'm just now glancing at your comments and will have to revisit, but I didn't want to wait before thanking you.

Cheers,
Steve

[ChoccieMuffin]

Also, you can set up different styles for online and print media. In my help files (which use my non-print medium) cross-refs look like this:

"For details see Getting Started."

In my PDFs (which use the PRINT medium) cross-refs look like this:

"For details see Getting Started on page 4."