Awesome work changing content! Now let's learn how to change the appearance of elements—their colors, sizes, and other visual properties.

JavaScript can modify CSS styles in two main ways: by changing inline styles directly or by managing CSS classes.

Engagement Message

What's one visual property you might tweak first to make a headline pop?

The style property lets you change individual CSS properties directly on an element. It's like programmatically adding inline styles to an HTML tag.

Example: element.style.color = "blue"; changes the text color to blue.

You can modify any CSS property this way!

Engagement Message

What CSS property would you change to alter an element's font size?

Here's the pattern for inline styles: element.style.propertyName = "value";

Some examples:

• element.style.fontSize = "20px";
• element.style.backgroundColor = "yellow";
• element.style.display = "none";

Notice how CSS properties with a hyphen, like background-color, become camelCase backgroundColor in JavaScript.

Engagement Message

How would you write the CSS property 'border-bottom-color' in JavaScript?