How to style custom element with HTML?

Hello respected members.

I am trying to style my custom element with the code below, but I’m totally clueless on how to add it. Can I only use JS to style it?

<!doctype html>
<html>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
    .btn {
      width: 150px;
      height: 40px;
      background-color: #046CFC;
      color: white;
      border: 0;
      border-radius: 25px;
      font-family: poppins;
      font-size: 16px;
    }

    .btn:hover {
      background-color: #ffffff;
      color: #1C1F25;
    }
  </style>

  <button class="btn">Buy now</button>
</html>

Thank you for your diligence and dedication to my question.

I’m totally clueless but tried to implement your code, I’m not sure that I did it correctly.

Video:

https://streamable.com/s3g11n

To style a custom element with HTML, you can use CSS. Here’s how you can style a custom element:

  1. Define your custom element in HTML using a custom tag or attribute.
htmlCopy code
<my-custom-element></my-custom-element>
  1. Create a CSS rule targeting your custom element. You can use the custom tag or attribute as a selector.
cssCopy code
my-custom-element {
  /* CSS properties and values */
}

  1. Apply styling to your custom element using CSS properties and values. Here are some examples:
cssCopy code
my-custom-element {
  color: red; /* Change text color to red */font-size: 20px; /* Set font size to 20 pixels */background-color: #f0f0f0; /* Set background color to light gray */padding: 10px; /* Add padding of 10 pixels */border: 1px solid black; /* Add a black border */
}

  1. Save the CSS file or include the styles within a tag in your HTML document.
htmlCopy code
<style>
  my-custom-element {
    color: red;
    font-size: 20px;
    background-color: #f0f0f0;
    padding: 10px;
    border: 1px solid black;
  }
</style>

By defining CSS rules targeting your custom element, you can apply various styling properties like colors, fonts, sizes, margins, and more. Remember to use unique custom element tags or attributes to avoid conflicting with existing HTML elements or styles.
It’s worth noting that custom elements may have their own specific styling requirements or properties based on their implementation. In such cases, you may need to consult the documentation or guidelines provided with the custom element to understand and apply the appropriate styles.
MyPennMedicine