How do you add css only for 1 element

Question

For example I want this:

<link rel="stylesheet" href="stylus.css">

only for this code:

<a href="yeet">Buy!</a>

Answer 1

If you use it for only one, then use id with #, for multiple elements you will need to use class with .

#only-this {
  color: red;
}

<a id="only-this" href="yeet">Buy!</a>
<a href="yeet">Sell!</a>

Answer 2

You can just have a class in your CSS and then you apply it to your object:

.my-stylus-class {
  color: blue;
}

<a class="my-stylus-class" href="yeet">Buy!</a>

I wanted to add that a class or ID is not neccesseraly required, you can of course also just define the element itself in CSS, so for example this would be also possible:

a {
  color: blue;
}

<a href="yeet">Buy!</a>

Answer 3

You need to make an identification on your html and then select it on the CSS page , like :

HTML :

<a id="buyButton">Buy!</a>

Then on CSS:

#buyButton
{
  color : blue;
}

Answer 4

you can't tell the browser to use a specific stylesheet (file) only for a certain element.

you have to give the element a specific ID, or class, and use that in your css for example:

.yeet {
  /* CSS Properties go here */
}

<a href="yeet" class="yeet">Buy!</a>

Answer 5

Inline css.

<a href="yeet" style="css here">Buy!</a>

Answer 6

This is what the question was: one element. A class can be more than one element. Here, using inline CSS which is not any worse than stylesheet CSS, you can make your yeets differently styled.

<a href="yeet" style="color:red;">Buy!</a>
<br>
<a href="yeet" style="color:orange;">Buy!</a>
<br>
<a href="yeet" style="color:green;">Buy!</a>
<br>
<a href="yeet" style="color:blue;">Buy!</a>
<br>
<a href="yeet" style="color:indigo;">Buy!</a>
<br>
<a href="yeet" style="color:violet;">Buy!</a>
<br>
<a href="yeet" style="color:chartreuse;">Buy!</a>