CSS Text Style

A Web Series on Crafting Digital Worlds(Part:2)

.p--->selector{ 
    font-family: Arial;}---->declarator

the selector that more specific has higher priority,
class name selector > element name selector

example:-

<p class="video-stats">3.4M views &#183; 6 months ago </p>

.p{ 
    font-family: Arial;
    margin-top: 0;
    margin-bottom: 0;---> element name selector
}
.video-title{
    font-size: 18px;
    font-weight: bold;
    width: 300px;
    line-height: 24px;
    margin-bottom: 5px;----->class name selector
}

Task2:-

<p class="a5">This is Tahoma Font</p>

    <p class="b5">Biggest Deals of the Year!</p>
    <p class="b5-sales"> Sales end Tuesday</p>

    <p class="c5">HTML CSS Course </p>
    <p class="c5-subtitle">Beginners to Pro</p>
    <p class="c5-para"> In this course, we will learn the skills you need to become a developer.</p>
    <button class="button"> Get Started</button>

    <p class="d5-title">Shopping for your business?</p>
    <p class="d5sub-title">See how Apple at Work can help.</p>
    <p class="learn">Learn more ></p>

    <p class="e5">New</p>
    <p class="e5-subtitle">MacBook Pro</p>
    <p class="e5-title">Supercharged for pros.</p>
    <p class="price">From $1999</p>
    <button class="buy">Buy</button>

    <p class="f5">1,049.61 <span class="usd">USD</span> </p>
    <p class="num">+18.05(1.75%) today</p>
    <p class="hour">After hours 1,048.00<span class="rednum">-1.61(0.15%)</span> </p>

    <p class="g5">freeCodeCamp.org<span class="free">@freeCodeCamp 1h</span></p>
    <p class="parag">As a web developer, you'll want to make your projects easy to use and navigate around.</p>
    <p class="para2">Here<span class="chp">@chp_it</span>outlines the top skills new developers should have.</p>

p{ 
    width: 200px;
    font-family: Arial;
    font-weight: bold;
}
.a5{
    font-family : Tahoma;
    font-weight : bold;
    font-size: 15px;
}
.b5{
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 0;
}
.b5-sales{
    color: red;
    font-style: italic;
    padding-top: 0;
    margin-top: 0;
    font-size: 8px;
}
.c5{
    font-family: Verdana;
    font-weight: bold;
    font-size: 9px;
    margin-bottom: 0;
}
.c5-subtitle{
    font-family: Verdana;
    padding-top: 0;
    margin-top: 0;
    font-size: 7px;
    color: rgb(196, 190, 190);
}
.c5-para{
    font-family: Verdana;
    font-size: 8px;
}
.button{
    background-color: green;
    color:white;
    border: none;
    border-radius: 2px;
    font-size: 8px;
    padding: 3px;
    margin-top: 0;
}
.d5-title{
    font-size: 12px;
    font-weight: 700;
    padding-left: 10px;
}
.d5sub-title{
    text-align: center;
    font-size: 8px;
    margin-top: 0;
    padding-top: 0;
}
.learn{
    color: rgb(23, 179, 236);
    text-align: center;
    font-size: 8px;
    margin-top: 0;
    padding-top: 0;
}

.e5{
    text-align: center;
    color: rgb(235, 69, 8);
    font-size: 6px;
}
.e5-subtitle{
    text-align: center;
    margin-top: 0;
    font-size: 12px;
    padding-top: 0;
    margin-bottom: 0;

}
.e5-title{
font-weight: bold;
margin: 0px 0px;
padding-left: 5px;
}
.price{
    text-align: center;
    font-size: 6px;
}
.buy{
    background-color: rgb(74, 74, 239);
    color: white;
    font-size: 6px;
    border: none;
    font-weight: bold;
    border-radius: 15px;
    padding: 3px 6px;   
}
.f5{
 font-size: 14px;
 margin-bottom: 0;
}
.num{
    padding-top: 0;
    margin: 0px 0px;
 color: rgb(77, 167, 77);
 font-size: 7px;
}
.hour{
    color: rgb(131, 127, 127);
    font-size: 7px;
    padding-top: 0;

}
.usd{
    font-size: 8px;
    color: rgb(131, 127, 127);
}
.rednum{
    font-size: 7px;
    color: rgb(237, 20, 20);
}
.g5{
 font-size: 8px;
 font-weight: bold;
}
.parag{
    font-size: 8px;
    font-weight: 200;
}
.para2{
    font-size: 8px;
    font-weight: 200;
}
.free{
    color: rgb(131, 127, 127);
}
.chp{
    font-size: 8px;
color: rgb(0, 140, 255);
}

Output:-