Document Structure

!DOCTYPE html
html

head

metadata or "data about data:": information about your page like the title, CSS etc

title Page Title title

style

your css

style

head

body

visible contents

script

your javascript

you could also add the Javascript in the head but loading it at the bottom of the page makes sure your html and css are loaded before any Javascript events are triggered, which may prevent bugs

script

body

html

      h1 Title h1

      p A paragraph of text p

      <img src="your-image-file.jpg"/> 

      ul
        lilist itemli
        lilist itemli
        lilist itemli
      ul

       div class="mydiv" A div container with a custom class div

Check the full list of HTML elements here so you can try a few you haven't used before.

In your CSS

Add your styles in between <head> and </head>

  head
    style
      /* Your CSS here */
    style
  head

CSS classes have a basic structure

      element {
        attribute: value;
      }

You can style basic HTML elements

      body {
        background-color: #c9c9c9;
        color: #000000;
      }

      h1 {
        font-family: arial, sans-serif;
        color: tomato;
      }

If you use a custom class the structure is the same but you add a dot '.' before its name

      .mydiv {
        font-family: courier-new;
        color: tomato;
        background-color: #ccc;
      }

Some colors in CSS have names, otherwise you can pick a color using #hexc0des or in rgb. Need a color picker? Try this one.

In your javascript

   script
      // Your Javascript code here!
    script

You can add this in the <head> and it might even work, but it is best practice to add it in the footer/bottom of your page, just before </body> so your document and styles/CSS are loaded before any Javascript events. Doing this may avoid bugs in the future.

Our function

We declare the variable body to avoid typing document.body everytime

      var body = document.body;

In our function we are "telling" the browser that whenever this function is executed, it must access the document's body and "toggle" the class.

    function changeMode() {
      body.classList.toggle("dark-mode");
    }

Our function will change this

    body
    body

Into this

   body class="dark-mode"
   body

Calling the function in your HTML

Make any HTML object with the id "switch" a CSS toggle switch.

Like this:

      <element> onclick="changeMode();<element>

You can add it in a div

      <div class="yourdiv"> onclick="changeMode();"> Div contents div

Or some text

      <p class="yourparagraph" onclick="changeMode();"> Some text. p

Or literally whatever you want

      <img class="yourimage" onclick="changeMode(); />

In your CSS (yes, again)

We can add a different body style by changing your new body class

   .darkmode  {
     /* General page styles */
      background-color: #000000;
      color: #ffffff;
      font-family: my-goth-font;
     }

Or change specific elements by "nesting" styles

   .parentclass .childclass {
     attribute: value;
     }

parent

child

Like this:

   .darkmode .mybutton {
     background-color: darblue;
     }

body class="darkmode"

mybutton