Text Exercises

Exercise 1 : Make the text Green

<!DOCTYPE html>
<html>
<head>
    <title>Activity 2</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Printing name in green -->
    <p class="name-green">Shaira M. Bayonla</p>
</body>
</html>

Exercise 2 : Numbers 1 to 10 with different colors

<!DOCTYPE html>
<html>
<head>
    <title>Activity 2</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Printing numbers 1 to 10 with different colors -->
    <p class="num1">1</p>
    <p class="num2">2</p>
    <p class="num3">3</p>
    <p class="num4">4</p>
    <p class="num5">5</p>
    <p class="num6">6</p>
    <p class="num7">7</p>
    <p class="num8">8</p>
    <p class="num9">9</p>
    <p class="num10">10</p>
</body>
</html>

Exercise 3 : Tahoma Font

<!DOCTYPE html>
<html>
<head>
    <title>Activity 2</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Printing name in Tahoma font -->
    <p class="name-tahoma">Shaira M. Bayonla</p>
</body>
</html>

Exercise 4 : Different Fonts

<!DOCTYPE html>
<html>
<head>
    <title>Activity 2.4</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Printing paragraph with different fonts -->
    <p class="font-arial">College life is full of challenges, that is why it is hard.</p>
    <p class="font-courier">Sometimes it feels overwhelming, but it also builds strength.</p>
    <p class="font-georgia">Meeting new people and making friends opens up different perspectives in life.</p>
    <p class="font-verdana">Despite the struggles, it teaches us a lot and make us grow.</p>
    <p class="font-times">In the end, the experience is worth every effort.</p>
</body>
</html>

Exercise 5 : Book

<!DOCTYPE html>
<html>
<head>
    <title>Activity 2</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Printing book description with formatting -->
    <p>
        One of my favorite books is <span class="underline">The Lout of the counts family</span> 
        by <span class="underline"> Yu Ryeo-Han</span>.  
        It is set in the <span class="bold-italic">glamorous</span> 1920s and tells the story of Cake Henituse’s pursuit of the Red Orgganization.  
        The novel paints a picture of the <span class="bold-italic">extravagant</span> lifestyle and the 
        <span class="bold-italic">tragic</span> consequences of obsession.  
        Ryeo-Han’s <span class="bold-italic">brilliant</span> writing style makes the book both 
        <span class="bold-italic">captivating</span> and unforgettable.
    </p>
</body>
</html>

Exercise 6 : Different Heading Sizes

<!DOCTYPE html>
<html>
<head>
    <title>Activity 2</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Different sizes of the letters in a Name -->
    <div class="heading-name">
        <h1>S</h1>
        <h2>h</h2>
        <h3>a</h3>
        <h4>i</h4>
        <h5>r</h5>
        <h6>a</h6>
        
    </div>
</body>
</html>

Learnings 

I realized that if I write a new style at the bottom of the sheet, it can override the rules I wrote at the top. Also, using classes is much smarter than styling elements one by one, because it allows me to change the look of multiple items instantly just by editing a single line of code.