.gif)
.png)
CSS Font and Text Properties
CSS Font and Text Property
- Font properties are used to add different styles to the fonts.
- Font properties are used to change the style, size, weight, etc. of the font.
- Font styling adds a good impact on the readers, that's why we use different font styling properties.
- Text properties are used to format text styles.
Basic code for Text Properties
<!DOCTYPE html>
<html>
<head>
<title>Properties</title>
<link rel=" shortcut icon" href=" favicon.png" >
<link rel=" stylesheet" href=" style.css" >
</head>
<body>
<p class="para"> Mallu Coder Sugu</p>
</body>
</html>
Text Properties and source code :
| Property | Code |
| font-family: font-family property is used to specify the font of a text. |
.para { font-family: 'sans-serif', 'Ubuntu'; } |
| font-size:
font-size property is used to specify the size of the text. |
.para { font-size: 20px; } |
| font-weight:
font-weight property set, how bold or thin characters in the text should be displayed |
.para { font-weight: bold; } |
| line-height:
The line-height property specifies the space between the fonts. |
.para { line-height: 1.8em; } |
| color:
The color property is used to set the color of the text. |
.para { color: red; } |
| background-color:
This property is used to set the background color of the text. |
.para { background-color: red; } |
| text-align:
The text-align property is used to set the alignment of a text. We can align a text in the left, right, center, and justify. |
.para { text-align: center; } |
| text-transform:
text-transform property is used to specify uppercase and lowercase and capitalize letters in a text. |
.para { text-transform: uppercase; } |
| text-decoration:
text-decoration properties are used to decorate text in one declaration. |
.para { text-decoration: none; } |
| word-spacing:
word-spacing property is used to specify the space between the words in a text. |
.para { word-spacing: 20px; } |
| text-shadow:
The text-shadow property is used to add the shadow effect to the text. |
.para { text-shadow: 1px 1px yellowgreen; } |
| letter-spacing:
letter-spacing property is used to specify the space between the characters in a text. |
.para { letter-spacing: 20px; } |
Introduction to CSS Part-2 PDF Click here to download
Easy Pickup
- 1. CSS More Samples
- 2. CSS Malayalam Classes
- 3. CSS Malayalam Notes
