Links

In your homebrew document you may want to add some links, either to external sites like your own website or to another brew, or some internal links to specific pages or headings so your audience can navigate via a Table of Contents. Adding links can be done with Markdown, saving a lot of effort over using HTML tags.

Markup

The Markdown syntax for links, either internal or external, follows a pattern of “text first, address second”, and is converted to an HTML <a> tag:

Veniam reprehenderit nisi [veniam id](https://www.markdownguide.org/).

Veniam reprehenderit nisi <a href="https://www.markdownguide.org/">veniam id</a>.

The resulting <a> (short for “anchor”) element has the required href attribute set to the given URL address, and your text placed inside the element. You could wrap more complex content with an anchor element as well, such as making an entire element a clickable link:

[![cat warrior](https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg) {width:325px,mix-blend-mode:multiply}](https://www.markdownguide.org/)

// the Markdown syntax for images is very similar to the one for links, so keep track of the brackets.  Also note that this includes a special modified { } syntax used only in the Homebrewery, to set some styles on the image.

<a href="https://www.markdownguide.org/">
  <img style="width:325px; mix-blend-mode:multiply;" src="https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg" alt="cat warrior">
</a>

This may be handy for those times where you want to add a publisher logo to your brew, and use it as a link to their website as well.

Styling

To style links in the Style Editor, you will use CSS to target and apply properties to the <a> element. But be aware that the anchor element has multiple states, including visited, hover‘ed, and active. The target for an unvisited link is link. Be sure to style each, if necessary:

CSS

.page a:link {
  font-family: ScalySansRemake;
  color: green;
  text-decoration: double underline 1px;
}

.page a:visited {
  color: #38D8A9;
}

.page a:hover {
  color: #B27502;
  cursor: 
}

You could go further and apply borders around each link, or make them blink, or any such crazy thing. Just be sure to consider how your audience will know that any particular text is a link.