Para with class='p1'
Para with class='p2'
Para with class='p3'
Para with class='p4'
<style>
.p1{
font-size: 18px;
font-family:Helvetica;
text-decoration: underline;
}</style>
.p2{
font-size: 16px;
font-family:sans-serif;
font-weight:bold;
}
.p3{
font-size: 16px;
color:red;
font-style:italic;
}
.p4{
font-size: 18px;
color:green;
text-shadow: 2px 2px #c0f040;
}
This is with Class='p5'
This is with Class='p6'
This is with Class='p7'
This is with class='p8'
<style>
.p5{
font-size: 20px;
font-family:courier;
background:#008cba;
color:#FFFFFF;
padding: 5px 2px;
border: 1px solid #f03000; // red
}
</style>
.p6{
font-size: 14px;
font-family:courier;
background:#f0f000;
color:#000000;
padding: 5px 2px;
border: 1px solid #0060c0;
border-radius: 10px;
}
.p7{
font-size: 25px;
font-family:Arial;
background:#c03040;
color:#ffffff;
padding: 15px 15px;
border: 2px solid #000000;
border-radius: 50%;
}
.p8{
font-size: 9px;
font-family:courier;
background:#f00000;
color:#ffffff;
padding: 15px 20px;
border: 2px solid #00f000;
border-radius: 8px;
box-shadow: 0 8px 15px 0 rgba(0,0,0,0.3), 0 5px 21px 0 rgba(0,0,0,0.18);
}