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
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; }
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.
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
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(); />
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; }
Like this:
.darkmode .mybutton { background-color: darblue; }