Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Directly change CSS properties with JavaScript
element.style.color = 'red'Toggle predefined CSS classes on/off
element.classList.add('active')Click each card to see examples and use cases
Use for: Text colors, backgrounds, borders
element.style.color = 'blue';element.style.backgroundColor = '#ff0000';Use for: Element dimensions, spacing
element.style.width = '200px';element.style.padding = '20px';Use for: Show/hide elements, fade effects
element.style.display = 'none';element.style.opacity = '0.5';In CSS, properties use hyphens. In JavaScript, use camelCase instead!
background-colorbackgroundColorfont-sizefontSizeborder-radiusborderRadiusmargin-topmarginToppadding-leftpaddingLefttext-aligntextAlignelement.style.background-color = 'red'; // Error: Invalid syntax
element.style.backgroundColor = 'red'; // ✅ Use camelCase
element.style.width = 200; // Doesn't work!
element.style.width = '200px'; // ✅ Include unit
element.style.color = 'red'; element.style.fontSize = '20px'; element.style.fontWeight = 'bold'; // Too many styles!
// In CSS: .highlight { color: red; ... }
element.classList.add('highlight');
// ✅ Much cleaner!