To switch between dark and light mode with JavaScript, the code is as follows −Example Live Demo    body {       padding: 25px;       background-color: white;       color: black;       font-size: 25px;       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .dark-mode {       background-color: black;       color: white;    }    .toggleButton {       padding: 12px;       font-size: 18px;       border: 2px solid green;    } Toggle Dark/Light Mode Example Toggle dark mode Click the above button to toggle dark mode    document .querySelector(".toggleButton") .addEventListener("click", toggleDarKMode);    function toggleDarKMode() {       var element = document.body;       element.classList.toggle("dark-mode");    } OutputThe above code will produce the following output −On clicking the “Toggle dark mode” button −

On a web hosting website, you must have seen the price plans. Also, on a website that sell membership, a pricing comparison table is visible. Such tables compare the features of the various plans, for example, free and paid, or free, business, enterprise, etc. plans. Let us see how to create a responsive pricing table with CSS i.e., how will such tables will be visible on different devices. Compare Fields Set the fields for comparison. For that, you can use the and mention the features. Here, we have shown a single plan i.e., pricing table for free membership i.e. ... Read More

To create fixed/sticky header on scroll with CSS and JavaScript, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;       margin: 0px;       padding: 0px;       height: 150vh; /*To produce scroll bar*/    }    .header {       width: 100%;       background-color: rgb(52, 21, 110);       color: white;       padding: 50px;       font-size: 20px;    }    div.sticky {       position: fixed;       top: 0; ... Read More

To create a gradient background color on scroll, the code is as follows −Example Live Demo    body {       height: 250vh;       color: white;       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;       background: linear-gradient(          141deg,          #a47dff 0%,          #4e28a7 40%,          #22053d 65%,          #72a4ff 75%       );    } Change Background Gradient on Scroll Example Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, laborum minus? Vero accusantium laborum quas cum, sed obcaecati quibusdam dignissimos. Scroll to see the effect. OutputThe above code will produce the following output −While scrolling the gradient will shift from dark blue to light blue −

The smooth scrolling effect can be set on a web page using the scroll-behaviour property. Set the value to smooth. Check this by implementing scrolling effect on the click of buttons i.e., reaching the below section by clicking a button the top, and vice versa. Let us see how to create a smooth scrolling effect with HTML and CSS. Smooth scrolling for the web page To begin with, under the , set the scroll-behaviour property to implement the property for thr entire web page − html { scroll-behavior: smooth; } Set the two sections The ... Read More

If you want to show notifications to the user about any information, such as a coupon for buying the product, you can create a snackbar. Use them as popups to display a message at the bottom of the screen. Generally, the snackbar vanish after some time. The snackbar appears to fadein and fadesout after some time. Let us see how to create a snackbar on the click of a button with CSS and JavaScript. Create a button for the snackbar For the snackbar to appear, you need to click on a button. Create a button using the element − ... Read More

The floats in CSS defines how an element should float. Let’s say, an element is taller than the element containing it. If it is floated, it will overflow outside of its container. Therefore, it’s hack is to use the overflow property and set the value auto. Without Clearfix Let us understand the issue by running the following program. Clearly, overflow occurs and the image moves outside − Example body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } ... Read More

Equal height columns can be created in a parent div on a web page. First, set the parent container as a table with the width 100%. Within that, create the columns and set the display property to table-cell. Let us see how to create equal height columns with HTML and CSS. Create a parent container Column 1 Column 1 Column 1 Column ... Read More

On a web page, we can easily create an element and position it sticky i.e., that specific element will remain stick even when the web page is scrolled. This is achieved using the position property with the value sticky. Create a div for the sticky element Set a parent div container − Sticky Element Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit vel dolore delectus esse consequatur at nulla, consequuntur sint quas ea. Incidunt, ex. Consequatur ipsa earum veritatis fugiat iusto, doloremque sunt beatae quaerat laboriosam nemo soluta ... Read More

To create fixed footer with CSS, the code is as follows −Example Live Demo    body{       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    }    .footer {       font-size: 20px;       position: fixed;       left: 0;       bottom: 0;       width: 100%;       background-color: rgb(50, 6, 100);       color: white;       text-align: center;    } Fixed/Sticky Footer Example All rights reserved © OutputThe above code will produce the following output −