how to apply different properties to different paragraphs in css

CSS
/*Here two ways are mentioned*/
#one{
    font-family: 'Impact';
    color: red;
    font-size: 25px;
}
#two{
    font-family: 'Times New Roman';
    color: blue;
    font-size: 50px;
}
.three{
    font-family: 'Impact';
    color: red;
    font-size: 25px;
}
.four{
    font-family: 'Times New Roman';
    color: blue;
    font-size: 50px;
}
<!-- Here two ways are mentioned -->
<!doctype html>
<html>
    <head>
    <link rel="stylesheet" type="text/css" href="test.css">
    </head>

    <body>
    <p id="one"><p>Sample Text one</p>
    <p id="two"><p>Sample Text two</p>
    <p class="three">Sample Text three</p>
    <p class="four">Sample Text four</p>
    </body>
</html>
Source

Also in CSS: