Codexpal - Learn Programming Interactively

Lesson Content

Colors and Typography

Colors and typography are fundamental to web design. They help create visual hierarchy, convey meaning, and improve readability.

Color Values

Named colors: red, blue, green
Hex codes: #FF5733, #3498db
RGB: rgb(255, 87, 51)
RGBA: rgba(255, 87, 51, 0.5) - with transparency

Typography Properties

font-family: Arial, 'Times New Roman', sans-serif
font-size: 16px, 1.2em, 120%
font-weight: normal, bold, 400, 700
line-height: 1.5, 24px
text-align: left, center, right, justify

Example

h1 {
  color: #2563eb;
  font-family: 'Arial', sans-serif;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
}

Example Code

Apply colors and font styles to create visually appealing text

<!DOCTYPE html>
<html>
<head>
<style>
body { 
  font-family: Arial, sans-serif; 
}
h1 { 
  color: #1f2937; 
  font-size: 32px;
  text-align: center;
}
.highlight { 
  color: #dc2626; 
  font-size: 18px; 
  font-weight: bold;
}
</style>
</head>
<body>
<h1>Typography Demo</h1>
<p class="highlight">Colored text example</p>
<p>Regular paragraph text with default styling.</p>
</body>
</html>

Expected Output:

Typography Demo

Study Tips

•Read the theory content thoroughly before practicing
•Review the example code to understand key concepts
•Proceed to the Practice tab when you're ready to code