CSS Text Tutorial 🎯

Welcome to our comprehensive guide on CSS Text! In this tutorial, we'll dive into the world of styling text with CSS, a powerful style sheet language that adds beauty and functionality to web pages.

Understanding CSS Text 📝

CSS Text properties allow us to control the visual aspects of text, such as font, color, size, and alignment. Let's explore some essential CSS text properties:

Font Family 💡

Font Family determines the typeface for your text. You can specify multiple fonts in order of preference, separated by commas.

css

h1 {
  font-family: Arial, sans-serif;
}

Font Size 💡

Font Size controls the size of the text. The default font size is 16 pixels, but you can adjust it to fit your needs.

css

p {
  font-size: 18px;
}

Font Weight 💡

Font Weight modifies the thickness of the font. Use bold for bold text or numbers from 100 to 900 for finer control.

css

p {
  font-weight: bold;
}

Text Alignment 💡

Text Alignment adjusts the position of the text within its container. Choose from left, center, right, and justify.

css

p {
  text-align: center;
}

Color 💡

Color changes the color of the text. You can use predefined colors like red, green, blue, or specify a hexadecimal color code.

css

p {
  color: blue;
}

CSS Text Quiz 💡

Practical Application 💡

Let's style a heading and a paragraph with CSS:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    h1 {
      font-family: Arial, sans-serif;
      font-size: 36px;
      font-weight: bold;
      color: #4CAF50;
      text-align: center;
    }

    p {
      font-family: Georgia, serif;
      font-size: 18px;
      color: #7F8C8D;
      line-height: 1.5;
      text-align: justify;
    }
  </style>
</head>
<body>
  <h1>Welcome to CodeYourCraft</h1>
  <p>In this tutorial, we'll dive into the world of styling text with CSS, a powerful style sheet language that adds beauty and functionality to web pages.</p>
</body>
</html>

In this example, we've styled an h1 heading and a p paragraph with various CSS text properties. You can save this code as a .html file and view it in your web browser to see the results.

Wrapping Up ✅

We hope you enjoyed this comprehensive guide on CSS Text properties! By mastering these essential properties, you'll be well on your way to creating visually appealing and engaging web pages. Stay tuned for more CSS tutorials on CodeYourCraft! 🚀