Text Formatting in CSS

HTML

CSS

Java Script

Text Formatting includes some properties which are mentioned below:

Text Color
Text Alignment
Text Decoration
Text Spacing
Line Height
Word Spacing

Text Color

Color property is used to set the color of text.

The color is specified by following types:

color name like “blue”
a HEX value like “#4d4dff”
a RGB value like “rgb(255,0,0)”

<!DOCTYPE>
<html>
<body>
<p style="color:green;"> Hello World</p>
<p style="color:rgb(255,0,0);">Welcome to CSS Tutorial</p>
<p style="color:#4d4dff;">Welcome to your classroom</p>
</body>
</html>

Output of the above program is shown below

Text Alignment

Text-align property is used to align the text horizontally i.e. center, left, right

<!DOCTYPE>
<html>
<body>
<h1 style="color:green;text-align:center;"> Hello World</h1>
<h2 style="color:rgb(255,0,0);text-align:left;">Welcome to CSS Tutorial</h2>
<h3 style="color:#4d4dff;text-align:right;">Welcome to your classroom</h3>
</body>
</html>

When the text-align property is set to justify then each line is stretched so that each line is of same width

<!DOCTYPE>
<html>
<body>
<div style="border-style:solid;width:70px;height:150px;padding:10px;"> Hello World. Welcome to CSS Tutorial. Welcome to your classroom</div>
</body>
</html>

Text Decoration

Text-decoration property is used to set or remove decorations from text.

The value text-decoration:none; is used to remove underline from link.

<!DOCTYPE>
<html>
<body>
<p style="color:Red"> For playing with codes <a style="text-decoration:none" href="https://sharptutorial.com/"> Visit us</p>
</body>
</html>

Other “text-decoration” values are shown below command

<!DOCTYPE>
<html>
<body>
<p style="color:Red"> For playing with codes <a style="text-decoration:none" href="https://sharptutorial.com/"> Visit us</p>
</body>
</html>

Text Spacing

The “text-indent” property is used to give indentation in the first line.

<!DOCTYPE>
<html>
<body>
<p style="text-indent:50px;"> Hello World! Welcome to Sharp Tutorial. </p>
</body>
</html>

Letter Spacing

The “letter-spacing” property is used to specify the space between the characters in a text.

<!DOCTYPE>
<html>
<style>
h1{
color:red;
letter-spacing:15px;
}
h2{
color:orange;
letter-spacing:-5px;
}
</style>
<body>
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
</body>
</html>

Line Height

The “line-height” property is used to specify the height between the lines.

<!DOCTYPE>
<html>
<style>
p{
line-height:37px;
}
</style>
<body>
<p>In academic writing, readers expect each paragraph to have a sentence or two that captures its main point. They’re often called “topic sentences,” though many writing instructors prefer to call them “key sentences.” There are at least two downsides of the phrase “topic sentence.” First, it makes it seem like the paramount job of that sentence is simply to announce the topic of the paragraph. Second, it makes it seem like the topic sentence must always be a single grammatical sentence. Calling it a “key sentence” reminds us that it expresses the central idea of the paragraph. And sometimes a question or a two-sentence construction functions as the key.</p>
</body>
</html>

Word Spacing

The “word-spacing” property is used to specify the space between the words in a line.

<!DOCTYPE>
<html>
<style>
.line1{
word-spacing:10px;
}
.line2{
word-spacing:-7px;
}
</style>
<body>
<p class="line1">Hello World! Welcome to Sharp Tutorial.</p>
<p class="line2">Lean with us CSS in few hours.</p>
</body>
</body>
</html>

Python

Java

C

C++

HTML/CSS

Java Script

PHP

SQL

C Programs