Table of contents
No headings in the article.
Cascading Style Sheets (CSS) are the pillars of web development. It helps to style the structure of the HTML documents. In CSS text and font are collectively called typography. There are several properties in response to them and we will be covering them in depth.
To begin with let's start with all the text properties.
<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.</p>
| Properties | Meaning | Syntax |
| Text Color | It sets the color of the text of the element. | color: 'red'; |
| Text Alignment | It helps to align the text as per the needs. Normally there are four alignments. They are: left, right, center and justify alignments. | text-alignment: center; |
| Text Decoration | It helps to decorate the text through different styles like underline, dashed, line through, etc. | text-decoration: underline; |
| Text Transformation | It transforms the text from lowercase to uppercase or it capitalizes the first letter of the word. | text-transform: uppercase; |
| Text Indentation | It leaves a certain space before the first line. | text-indent:5px; |
| Direction | It sets the direction for the text where it is to be set. Normally, it sets from left to right. | direction:rtl; |
| Letter Spacing | It sets the space in between letters. | letter-spacing:3px; |
| Word Spacing | It is similar to letter spacing but it sets the space between words. | word-spacing:10px; |
| Text Align Last | It sets the alignment of the last line of the paragraph. | text-align-last:left; |
Now, let's start with Font properties.
| Properties | Meaning | Syntax |
| Font Family | It helps to define the font family groups we want to use. Also, we can use the font family by importing them into our projects like from google. | font-family: Verdana, Geneva, Tahoma, sans-serif; |
| Font Size | It sets the size of our font. | font-size:30px; |
| Font Weight | It sets the thickness or the boldness of the font. Normally, it ranges from 400-800 or from thin to bold. | font-weight:600; or font-weight: bold; |
| Font Style | It allows to font style to be bold, italic or oblique. | font-style:italic; |
We need to apply all or only the required CSS properties in <p> tag as below:
p{
/* try out all the following properties as:*/
color:red;
text-alignment:center;
text-decoration:underline;
text-transform:uppercase;
text-indent:5px;
direction:rtl;
letter-spacing:3px;
word-spacing:10px;
text-align-last:left;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight:600;
/* or font-weight: bold; */
font-size:30px;
font-style:italic;
}
I am applying all those properties and my output looks like this:
That's it for all the CSS Typography properties. If you like this article kindly share it with your developer's community. Thank you for reading this article and will be right back with another informative article, till then take care and stay healthy.