DEV Community

Cover image for Daily Code 61 | Text Styling (🟥 HTML & 🟦 CSS Course 3)
Gregor Schafroth
Gregor Schafroth

Posted on

Daily Code 61 | Text Styling (🟥 HTML & 🟦 CSS Course 3)

Just continuing with my HTML & CSS course today https://www.youtube.com/watch?v=G3e-cpL7ofc

Let’s go!

My Code

Today was all about text styling. I knew most of it, but I found it interesting that the best practice is to first set the margins down to zero and then again recreate bottom margins. Good to know.

Anyways here the text stylings we looked at:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Styles</title>
  <style>
    p {
      font-family: Arial;
      margin-top: 0;
      margin-bottom: 0;
    }

    .video-title {
      font-weight: bold;
      font-size: 18px;
      width: 300px;
      line-height: 24px;
      margin-bottom: 5px;
    }

    .video-stats {
      font-size: 14px;
      color: rgb(96, 96, 96);
      margin-top: 0;
      margin-bottom: 20px;
    }

    .video-author {
      font-size: 14px;
      color: rgb(96, 96, 96);
      margin-top: 0;
      margin-bottom: 20px;
    }

    .video-description {
      font-size: 14px;
      color: rgb(96, 96, 96);
      width: 300px;
      line-height: 22px;
      margin-top: 0;
      margin-bottom: 100px;
    }

    .apple-text {
      margin-bottom: 50px;
      font-size: 14px;
      background-color: rgb(227, 65, 64);
      color: white;
      text-align: center;
      padding-top: 18px;
      padding-bottom: 18px;
    }

    .shop-link {
      cursor: pointer;
      margin-left: 12px;
    }

    .shop-link:hover {
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <p class="video-title">
    Talking Tech and AI with Google CEO Sundar Pichai
  </p>
  <p class="video-stats">
    3.4M views &#183; 6 months ago
  </p>
  <p class="video-author">
    Marques Brownlee &#10003;
  </p>
  <p class="video-description">
    Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
    blablabla blablabla blablabla blablabla
  </p>

  <p class="apple-text">
    Shop early for the best selection of holiday favourites. <span class="shop-link">Shop now &#62;</span>
  </p>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more