How to implement theme to html?

Question

Okay so I'm 100% new to programming. The question format may also be wrong. The Question: theme on html? Still beginner on html. wanted it to look aesthetically pleasing to my eyes at least with what I've learnt. No CSS knowledge yet. I've been little bit searching whatever i feel like putting on my page(emojis). I've searched Google and did what was written but it still doesn't display the theme. Okay so here's the code so you can see, will add more things later as i learn(I know it's nothing for you all):

<html>
  <head>
    <meta charset=“UTF-8”>
     <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="theme-color" content="#f7cac9">
       <title>Galaxia
       </title>
  </head>
    <body>

  <h3 style = "position:absolute; right:150px; top:-10px; background-color:pink;">
    Welcome to my weird abode &#x1F98B;
  </h3>
  <br>
  <br>
  <!-- added two br tags because otherwise heading and paragraph overlap -->
  
  <div class="coder">
    <p>This is a html example from me for now,
        <br>
        have fun.:) </p>
    </div>

</body>
</html>

Thank you in advance!

That is what CSS is, HTML by itself is pretty much just text and images. CSS is used for styling and coloring. When you wrote "position:absolute; right:150px; top:-10px; background-color:pink;" that is css — Aidan Welch
I see. I just thought It was possible through HTML that's all. But if it's only through CSS, then that's just something else I'll study later on the way. Thank you! — Amethyst

Developer123 Developer123 · Accepted Answer · 2020-06-24T14:07:25

In order to add styles to your HTML page, you use css (with the file extension .css -- for example styles.css). To make the styles visible on your html page, in the head section you would include <link rel="stylesheet" href="styles.css"/>. For instance, in the css file, you could include:

h3 {
    color: #f7cac9;
}

Then, after adding the link rel, the h3 elements in your html page would be pink. Hope this helps! Alternatively, you could add tags in your html page.

Here's an example of adding css to an html page. By adding .coder {background: green}, the background-color turns green:

.coder {
  background-color: green;
}

<html>
  <head>
    <meta charset=“UTF-8”>
     <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="theme-color" content="#f7cac9">
       <title>Galaxia
       </title>
  </head>
    <body>

  <h3 style = "position:absolute; right:150px; top:-10px; background-color:pink;">
    Welcome to my weird abode &#x1F98B;
  </h3>
  <br>
  <br>
  <!-- added two br tags because otherwise heading and paragraph overlap -->
  
  <div class="coder">
    <p>This is a html example from me for now,
        <br>
        have fun.:) </p>
    </div>

</body>
</html>

How to implement theme to html?

2 Answers