How to do styles and scripts in html

107

How to do styles and scripts in html. I mean, how to do CSS and Javascript. You can also do javascript and css in the html page. (Note: It will contain 3 codes)
Just the code below and I will explain below the code 👇

HTML:

<html>
  <head>
    <title>CSS and JavaScript tutorial</title>
    <link rel="stylesheet" href="styles.css"> <!--Linking with the css-->
    <script src="script.js"></script> <!--Link the script with the script tag-->
  </head>
  <body>
    <h1>This is a h1 header</h1>
    <p>This is a paragraph</p>
    <br>
    <br>
    <button onclick="alertbtn()">Alert</button>
    <br>
    <br>
    <button onclick="confirmbtn()">Confirm</button>
    <br>
    <br>
    <button onclick="promptbtn()">Prompt</button>
  </body>
</html>

CSS:

body {
  /*Picking the website font 👇*/
  font-family: 'Your font (You can put your font in Apostrophe if you want)';
}

JS (JavaScript):

function alertbtn() { // The onclick from html
  alert("Hello!")
}
function confirmbtn() {
  confirm("Hello!")
}
function promptbtn() {
  prompt("This is a prompt which contains an input other than buttons!","Default input")
}

Java Script:
Here, the example above, we see that, in html, there are 3 buttons. Each button will perform different actions. The first one, it will alert "Hello!" and there is gonna be a OK button only. But, the next one is little different. It contains two buttons, Cancel and OK to confirm. BUT! In the 3rd one, it is very different. It contains an input and Cancel and OK button. Enter a text in the strings and if you want to enter a default input, then, put a comma (,) then, enter a string.

CSS:
Ok now in CSS, to define a class, first use a dot (.) before the class name then put '{' in that style class, do whatever you want. To define an id, use hashtag (#) before the id name. Then you know what to do, do whatever you want. to define tags, just put the tag name directly. Now in this case, I defined the tag 'body' and you can put the font to anything. You can customize the body also!

You can try this by copying the code!

Copy Javascript and paste it into the script.js
Copy CSS and paste it into the styles.css
Copy HTML and paste it into the index.html