HTML & CSS - Mastery / CSS Basics

Styling Text: Color, Font, Size

💇‍♀️ Styling Text

Text doesn’t have to stay boring and black. With just a few lines of CSS, you can make your text look fun, professional, or anything in between!

Let’s look at the 3 basics for styling text: color, font, and size.

Master Code Block (This will be used for further examples)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Lists Example</title>
  </head>
  <body>
    <!--All content to be added here-->
  </body>
</html>

🎨 1. Text Color – Color Property

Use the color property to change the text color.

Example:

You can use: Color names, HEX codes, RGB/RGBA

🚀 Try and Play Around

🖋️ 2. Font Family – font-family Property

This lets you choose the style of the text, like Arial, Times New Roman, or something fancy like cursive.

Example:

📝 Tip: Always add a backup font like sans-serif in case the main one isn’t available.

🚀 Try and Play Around

🔠 3. Font Size – font-size Property

Use font-size to make your text bigger or smaller.

p { font-size: 18px; }

You can use: px, em or rem and %

🚀 Try and Play Around

🧠 Final Thoughts

  • Keep your fonts readable

  • Use contrasting colors for accessibility

  • Combine styles to match the vibe of your website