Kanbritech Learn logo
HTML HTML Tutorial 45h track

HTML Colors

Create a notice using a named text color and a numeric background color.

Understand the topic

CSS supports named colors and several numeric color models. Apply them to text, backgrounds, borders, and other properties. Different notations can describe the same color; choose a notation that makes your design easy to maintain. A readable interface needs enough contrast between foreground and background, and status information should also use words or symbols.

Worked example

<p style="color: navy; border: 2px solid teal; padding: 1rem;">Your seat is confirmed.</p>

navy and teal are named colors. The text states the status explicitly instead of making a green or red background carry the entire message.

Practice

Create a notice using a named text color and a numeric background color.

Show a suggested answer
<p style="color: darkgreen; background-color: #ecfdf5;">Payment received.</p>

Common mistake

A color that looks bright on one screen may be hard to read on another. Test contrast rather than choosing by appearance alone.

HTML documentation

Live Example

Try Coding

Result