Text properties
color:change the color of text
<html>
<head>
<style>
.para1
{
color:red;
}
</style>
</head>
<body>
<p class="para1">hello insano</p>
</body>
</html>
font-size: changes the size of text
<html>
<head>
<style>
.para1
{
font-size:100px;
}
</style>
</head>
<body>
<p class="para1">hello insano</p>
</body>
</html>
font-family: changes the font style or handwriting.
<html>
<head>
<style>
.para1
{
font-family:algerian;
}
</style>
</head>
<body>
<p class="para1">hello insano</p>
</body>
</html>
word-spacing:provides the gap between words.
<html>
<head>
<style>
.para1
{
word-spacing:10px;
}
</style>
</head>
<body>
<p class="para1">hello insano hello insano hello insano hello insano hello insano hello insano </p>
</body>
</html>
letter-spacing: used to provide a gap between letters.
<html>
<head>
<style>
.para1
{
letter-spacing:30px;
}
</style>
</head>
<body>
<p class="para1">hello insano hello insano hello insano hello insano hello insano hello insano </p>
</body>
</html>
line-height: provides the height to each line of the selected element.
<html>
<head>
<style>
.para1
{
line-height:500px;
font-size:100px;
}
</style>
</head>
<body>
<p class="para1">
hello insano hello insano hello insano hello insano hello
insano hello insano insano hello insano hello insano insano hello insano hello
insano insano hello insano hello insano insano hello insano hello insano insano
hello insano hello insano insano hello insano hello insano insano hello insano
hello insano insano hello insano hello insano insano hello insano hello insano
insano hello insano hello insano insano hello insano hello insano insano hello
insano hello insano insano hello insano hello insano insano hello insano hello
insano insano hello insano hello insano insano hello insano hello insano
</p>
</body>
</html>
text-shadow: provides a shadow over a text.
syntax:
text-shadow:left top blur color;
<html>
<head>
<style>
.para1
{
text-shadow:10px 10px 10px red;
font-size:100px;
}
</style>
</head>
<body>
<p class="para1">home</p>
</body>
</html>
text-transform: used to convert the case of the text.
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
<html>
<head>
<style>
.para1
{
text-transform:uppercase;
font-size:100px;
}
</style>
</head>
<body>
<p class="para1">home</p>
</body>
</html>
text-decoration: used to apply underline, overline, or strike-through at a text.
text-decoration:underline;
text-decoration:overline;
text-decoration:none;
text-decoration:line-through;
text-decoration: underline overline line-through;
<html>
<head>
<style>
.para1
{
text-decoration: underline wavy 30px red;
font-size:100px;
}
</style>
</head>
<body>
<p class="para1">home</p>
</body>
</html>
font-weight:
1. defines the boldness of text
2. Font-weight can vary from 100 to 900
<html>
<head>
<style>
.para1
{
font-weight: bolder;
font-size:100px;
}
.para2
{
font-weight: 700;
font-size:100px;
}
</style>
</head>
<body>
<p class="para1">home</p>
<P class="para2">hello and ok</P></body>
</html>
text-align: used to align text of selected elements in left, right, or center,justify.
<html>
<head>
<style>
.para1
{
text-align:Center;
}
</style>
</head>
<body>
<p class="para1">home</p>
</body>
</html>
0 Comments