C030 Text

In this task, you will work with text, fonts, and more.

Start by creating a new HTML document with the following content:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <p id="p1">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum aperiam pariatur, provident laborum, sit voluptate assumenda saepe, dolor
      repellendus quae vel blanditiis aut autem. Minus harum architecto fugiat in quam.
    </p>
    <p id="p2">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum aperiam pariatur, provident laborum, sit voluptate assumenda saepe, dolor repellendus quae vel blanditiis aut autem. Minus harum
      architecto fugiat in quam.
    </p>
    <p id="p3">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum aperiam pariatur, provident laborum, sit voluptate assumenda saepe, dolor repellendus quae vel blanditiis aut autem. Minus harum
      architecto fugiat in quam.
    </p>
    <p id="p4">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum aperiam pariatur, provident laborum, sit voluptate assumenda saepe, dolor repellendus quae vel blanditiis aut autem. Minus harum
      architecto fugiat in quam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum aperiam pariatur, provident laborum, sit voluptate assumenda saepe, dolor repellendus quae vel
      blanditiis aut autem. Minus harum architecto fugiat in quam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum aperiam pariatur, provident laborum, sit voluptate assumenda saepe,
      dolor repellendus quae vel blanditiis aut autem. Minus harum architecto fugiat in quam.
    </p>
  </body>
</html>

Now add a style.css file (remember to reference it in the head) and ensure that:

The paragraph with the id p1 should use the font-family Verdana, and the 1st word “Lorem” and the 3rd word “dolor” should be bold (you must not use <b> tags).
The paragraph with the id p2 should have red text and a font size of 1.5em.
The paragraph with the id p3 should use a Google font called Chilanka. You can find it here: https://fonts.google.com/?category=Handwriting. Additionally, add a text shadow (try 2px 2px 2px red and experiment with other options).
The paragraph with the id p4 should display the text in 3 columns (use column-count).

See a possible solution

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css?family=Chilanka&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <p id="p1">
    <span class="bold">Lorem</span> ipsum <span class="bold">dolor</span> sit amet consectetur adipisicing elit. Illum aperiam pariatur, provident laborum, sit voluptate assumenda saepe, dolor
    repellendus quae vel blanditiis aut autem. Minus harum architecto fugiat in quam.
    </p>
    <p id="p2">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum aperiam pariatur, provident laborum, sit voluptate assumenda saepe, dolor repellendus quae vel blanditiis aut autem. Minus harum
    architecto fugiat in quam.
    </p>
    <p id="p3">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum aperiam pariatur, provident laborum, sit voluptate assumenda saepe, dolor repellendus quae vel blanditiis aut autem. Minus harum
    architecto fugiat in quam.
    </p>
    <p id="p4">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum aperiam pariatur, provident laborum, sit voluptate assumenda saepe, dolor repellendus quae vel blanditiis aut autem. Minus harum
    architecto fugiat in quam.
    </p>
</body>
</html>

#p1 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.bold {
    font-weight: bold;
}

#p2 {
    color: red;
    font-size: 1.5em;
}

#p3 {
    font-family: "Chilanka";
    font-size: 1.5em;
    text-shadow: 2px 2px 2px red;
}

#p4 {
    column-count: 3;
}