CSS Text:-

Code family

we are the code family "Code family" link.

Text Color:-

color names like "red"

HEX values like "#ff0000"

an RGB values like "rgb(255,0,0)"

Text Alignment:-

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}
</style>
</head>
<body>

<h1>code family</h1>
<h2>code family</h2>
<h3>code family</h3>

<p>we are code family</p>

</body>
</html>

justify the text:-

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 10px;
  width: 200px;
  height: 200px;
  text-align: justify;
}
</style>
</head>
<body>

<h1>code family justify</h1>

<p>we are the code family</p>

<div>
welcome to code family
</div>

</body>
</html>

Text Decoration in CSS:-

<!DOCTYPE html>
<html>
<head>
<style>
a {
  text-decoration: none;
}
</style>
</head>
<body>

<p>code family: <a href="https://www.codesfamily.com">codesfamily.com</a></p>

</body>
</html>

Example:-

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}
</style>
</head>
<body>

<h1>code family</h1>
<h2>code family</h2>
<h3>code family</h3>

</body>
</html>

Text Transformation:-

<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}
</style>
</head>
<body>

<p class="uppercase">code family</p>
<p class="lowercase">code family</p>
<p class="capitalize">code family</p>

</body>
</html>

Text Indentation:-

Letter Spacing and Line Height:-

The letter-spacing property is using to specify the space between the characters in a text in html page. The line-height property is using to specify the space between lines:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -3px;
}

p.small {
  line-height: 0.7;
}

p.big {
  line-height: 1.8;
}
</style>
</head>
<body>

<h1>code family</h1>
<h2>code family</h2>


<p>
code family<br>
</p>

<p class="small">
code family<br>
code family<br>
</p>

<p class="big">
code family.<br>
code family<br>
</p>
</body>
</html>

Word Spacing and Text Shadow:-

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  word-spacing: 10px;
}

h2 {
  word-spacing: -5px;
}

h3 {
  text-shadow: 3px 2px red;
}
</style>
</head>
<body>

<h1>code family</h1>
<h2>code family</h2>
<h3>code family</h3>
</body>
</html>

CSS Text