Styles & Colors

While CSS is the proper way to style a page, HTML provides a style attribute and a color system every developer needs to know.

The style Attribute

The style attribute applies inline CSS directly to an element. It’s handy for quick demos, but external or internal CSS is preferred for real projects - it keeps structure (HTML) and presentation (CSS) separate.

Try it yourself

<p style="color: white; background-color: #1dbf73; padding: 8px; border-radius: 8px;">
  Styled with an inline style attribute.
</p>

Output

Specifying Colors

Colors can be written as named colors, hex codes (#rrggbb), rgb()/rgba(), or hsl().

Try it yourself

<p style="color: tomato;">Named color</p>
<p style="color: #1dbf73;">Hex color</p>
<p style="color: rgb(29, 191, 115);">RGB color</p>

Output

Linking Real CSS

For anything beyond a quick tweak, link an external stylesheet with <link rel="stylesheet" href="styles.css"> inside <head>, or use an internal <style> block. Deep CSS is its own course - this is just enough to get you unblocked in HTML.

Coding challenge

Style a paragraph with a background color, white text, and rounded corners using the style attribute.

<p>
  Style me!
</p>

Output

Answer every question below to mark this chapter as complete.

Quiz Yourself

Score: 0/4

1. Which attribute applies inline CSS directly to an element?

2. Which of these is a valid hex color?

3. Where do you usually link an external stylesheet?

4. Which is generally best practice for styling a real project?