Mefth Loader Gif
Last Updated: 21-Nov-2021


CSS Text Decoration


HTML SOURCE CODE


<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>CSS course</title>
	<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
</head>
<body>

	<!-- ናይ ሎሚ ትምህርትና ብዛዕባ  Text Decoration ኢዩ።
<p class="paragraph-st">This is CSS course for Begginers, Here we are in 13rd part of the course, Numbers are 1 2 3 4 5 6 7 8 9 10 11 12 13</p>

<p class="paragraph-nd">This is CSS course for Begginers, Here we are in 13rd part of the course, Numbers are 1 2 3 4 5 6 7 8 9 10 11 12 13</p>

<p class="paragraph-rd">This is CSS course for Begginers, Here we are in 13rd part of the course, Numbers are 1 2 3 4 5 6 7 8 9 10 11 12 13</p>

<p class="paragraph-th">This is CSS course for Begginers.</p>

</body>
</html>

CSS Source code Text Decoration


.paragraph-st,.paragraph-nd,.paragraph-rd,.paragraph-th{
    font-size: 16px; /* ዓቐን ዕብየት ጽሕፈት */
    font-style: normal; /* ቅዲ ጽሕፈት */
	background-color: hsl(160, 80%, 50%); /* Background Color */
	font-family: 'Arial', sans-serif; 
}
	/*
	
	ካብዚኦም ድላይካ መሪጽካ ክትጥቀም ትኽእል ኢኻ፡         
	
Text Decoration
-------------------------------------
text-decoration-color: color | initial | inherit;
-------------------------------------
text-decoration-style: solid | wavy | dotted | dashed | double | initial | inherit;
-------------------------------------
text-decoration-line: underline  | line-through | overline | underline overline | none;
------------------------------------
Short hand method

እቶም ኣብዚ ምርጫ ዘለው ካብቶም ናቶም ኣብ ላዕሊ ዘለው ሪኢኻ ተካኣዮም፡
------------------------------------
text-decoration: text-decoration-line | text-decoration-color | text-decoration-style | initial | inherit;
------------------------------------
	*/

.paragraph-st{
text-decoration: overline blue dotted 2px; /* SHORTHAND ALL IN ONE */
}

.paragraph-nd{
 text-decoration-line: line-through;
 text-decoration-color: green;
 
}
.paragraph-rd{
   text-decoration-line: underline;
   text-decoration-color: red;
   text-decoration-style: solid;
}

.paragraph-th{
    text-decoration-line: underline;
	text-decoration-style: wavy;
	text-decoration-color: red;
}	

The Result of the above Code is:

CSS Text Decoration

In Tigrinya Language (ብትግርኛ)



URL Copied
Share this              

Report for Comment or Reply




Mefth Loader gif

Be the first to ... Write comment.

You must Login to write Comment.

We've Recommended Articles for you