8.2 Student Activity

Design a Blog Post Layout with Google Fonts and Text Styling

  1. Step 1:

    • Create an HTML file (blog.html) with the following structure for a simple blog post:

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blog Post</title>
  <link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      line-height: 1.6;
      padding: 20px;
      background-color: #f9f9f9;
    }
    h1 {
      font-family: 'Lora', serif;
      text-align: center;
      color: #333;
      font-size: 36px;
    }
    p {
      font-size: 18px;
      color: #666;
      background-color: #fff;
      padding: 10px;
      border-left: 4px solid #ccc;
    }
    a {
      color: #3498db;
      text-decoration: underline;
    }
    a:hover {
      text-decoration: none;
      color: #2c3e50;
    }
  </style>
</head>
<body>
  <h1>Understanding CSS Typography</h1>
  <p>Typography plays a crucial role in web design. It affects the readability and overall aesthetics of a web page.</p>
  <p><a href="#">Learn more about typography</a></p>
</body>
</html>

  2. Step 2:

    • Apply Text Styling:

      • Use different Google Fonts for headings and paragraphs.

      • Set appropriate line-height, letter-spacing, and word-spacing for paragraphs.

      • Apply a text-decoration hover effect for links to remove the underline.

  3. Step 3:

    • Experiment with Text Alignment:

      • Center the main heading and adjust the alignment of paragraphs as needed. Try using different text-align values to see how it affects the layout.

  4. Step 4:

    • Test Your Page: View the page in a browser and make adjustments to the font sizes, colors, and spacing to enhance readability and aesthetics.

Previous8.1 CSS Typography & Text StylingNext8.3 Homework/Practice

Last updated