HTML/CSS - 4

HTML/CSS - 4: Colors & Inline Styles

So far, your HTML has focused on structure and text. Now you can start changing how individual elements look by adding CSS directly inside an HTML tag.

One beginner-friendly way to do this is with the style attribute. For example: <p style="color: red;">Hello!</p> changes that paragraph's text color to red.

You can also use inline styles to change things like background color and font size. Each style rule follows the pattern property: value; and multiple rules can be placed inside the same style attribute.

Your challenge: Create a small colorful message using different text colors, backgrounds, and font sizes.

What should you notice?

The style attribute goes inside the opening HTML tag. The CSS instructions go inside quotation marks.

For example: <h2 style="color: orange;">Warning!</h2> changes the color of that heading, but it does not change every other heading on the page.

Experiment: Create three paragraphs and give each one a different text color. Then choose one paragraph and give it a background color too.

Try combining styles: You can place several CSS rules inside one style attribute. Just separate each rule with a semicolon.

For example: <p style="color: black; background-color: gold; font-size: 24px;">Treasure found!</p>

Small CSS tip: Inline styles are useful while learning and for quick experiments. Later, you will learn ways to write CSS separately so the same style can be reused across many elements.

<h1 style="color: orange; font-size: 42px;">Welcome to the Color Lab</h1>

<p style="color: lightblue;">This sentence is light blue.</p>

<p style="color: black; background-color: yellow;">
Warning: extremely bright paragraph!
</p>

<p style="color: lime; font-size: 24px;">
This message is green and larger than normal.
</p>