Sibbs Gambling Sibbs Gambling - 1 month ago 10
CSS Question

Define a custom <a> tag in CSS?

In my website, I need two types of

<a>
tags -- one for inline links and the other for standalone links. So you can imagine I want these two types of
<a>
tags to be in different colors/styles.

For example, for inline links, I don't want to make them pop out too much, so I want light underlines beneath them. On the contrary, I want standalone links to pop out, so I want to color them in bright blue.

My idea is to create two tags,
<a_inline>
and
<a>
. How may I do this? I tried making a copy of
<a>
, renamed the copy to
<a_inline>
, and modified the color attribute, etc., but the thing is not clickable.

Answer

Don't create your own elements, if you do that then you aren't using HTML any longer. (Custom elements are a thing, but not appropriate here).

In general, the two tools for grouping elements together are:

Using classes would look something like:

a {
  color: red;
}
a.inline {
  color: yellow
}
<ul>
  <li><a href="http://example.com">External link</a>
  </li>
  <li><a href="#foo" class="inline">Inline link</a>
  </li>
</ul>

While the other approach would be:

a {
  color: red;
}
article a {
  color: yellow
}
<a href="http://example.com">External link</a>

<article>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. <a href="#foo">Inline link</a>. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce
    nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.</p>


</article>

In this particular case, however, you already have enough distinguishing features in the HTML to not need to add anything.

Assuming I understand you correctly, your inline links will have href attributes with values starting with the # symbol. You can use that in an attribute selector:

a {
  color: red;
}
a[href^="#"] {
  color: yellow
}
<ul>
  <li><a href="http://example.com">External link</a>
  </li>
  <li><a href="#foo">Inline link</a>
  </li>
</ul>