LEARN HOW TO CREATE A GLOWING BULB WITH HTML AND CSS

Head tag:
Content in the head section is invisible to the visitor.
body tag:
This contains the visible content of the webpage.
div class=”wrapper”: This creates a field detail with the class “wrapper” that can preserve all of the interactive factors
input type=”checkbox” id=”button”: This creates a checkbox detail with the ID “button”. This checkbox might be used to control the state of the bulb.
img src=”bulb-off.jpg” id=”off” id=”button”: This creates an image element with the ID “off” and “button”. The image source is “bulb-off.jpg”, which presumably shows a picture of an off bulb. However, having two IDs on the same element is invalid HTML. It’s likely meant to be just one ID, either “off” or “button”.
img src=”bulb-on.jpg” id=”on” id=”button”: This creates another image element with the ID “on” and “button”. The image source is “bulb-on.jpg”, presumably showing a picture of an on the bulb. Similar to the previous element, having two IDs is invalid.
label for=”button”><span></span></label>: This creates a label element with an empty span inside. The “for” attribute associates the label with the checkbox element that has the ID “button”. This means clicking on the label will also toggle the checkbox.
Source code of CSS file.