My Code

Name: Daily Code 61 | Text Styling (🟥 HTML & 🟦 CSS Course 3)
Rating: 3.7 (5906 reviews)
Author: gregor_schafroth

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>