Colors, Fonts, and Text
🎨 CSSStyle text with colors, fonts, sizes, and text properties.
0 of 5 completed
Colors, Fonts, and Text
Colors
color: red; /* Named color */
color: #5E256D; /* Hex color */
color: rgb(94, 37, 109); /* RGB */
color: rgba(0,0,0,0.5); /* RGBA with transparency */Fonts
font-family: "Arial", sans-serif;
font-size: 18px;
font-weight: bold; /* or 700 */
font-style: italic;Text Properties
text-align: center;
text-decoration: underline;
text-transform: uppercase;
line-height: 1.6;
letter-spacing: 1px;Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Arial, sans-serif;
max-width: 600px;
margin: 40px auto;
padding: 0 20px;
}
h1 {
color: #5E256D;
font-size: 2rem;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
}
p {
color: #333;
line-height: 1.8;
font-size: 1rem;
}
.subtitle {
color: #6b7280;
font-style: italic;
text-align: center;
}
</style>
</head>
<body>
<h1>Typography Demo</h1>
<p class="subtitle">A lesson in beautiful text</p>
<p>This is how good typography makes content readable and attractive.</p>
</body>
</html>Exercises
Exercise 1. Style the Body Text
Easy
Write CSS that makes the body text colour #5E256D and the font family Arial, sans-serif.
Use exactly: color: #5E256D; and font-family: Arial, sans-serif;
Use exactly: color: #5E256D; and font-family: Arial, sans-serif;
body {
}Expected Output
Body text renders purple, sans-serif.