<!DOCTYPE html>
<html>
<head>
<title>The initial-letter-align property in CSS</title>
<style type="text/css">
.auto {
-webkit-initial-letter-align: auto;
initial-letter-align: auto;
color: red;
}
.alphabetic {
-webkit-initial-letter-align: auto;
initial-letter-align: auto;
color: purple;
}
.hanging {
-webkit-initial-letter-align: auto;
initial-letter-align: auto;
color: deeppink;
}
.ideographic {
-webkit-initial-letter-align: auto;
initial-letter-align: auto;
color: green;
}
</style>
</head>
<body>
<p class="auto ">Study Tonight</p>
<p class="alphabetic">Is the best place</p>
<p class="hanging">to learn digital courses</p>
<p class="ideographic">in a simplified way</p>
</body>
</html>