Styling text in CSS is one of the fundamental aspects of web design that helps you create a more attractive website. In this section, we will take a closer look at different CSS properties for styling text. These properties include font styles, alignment, color, and spacing.
Initially, the font-family property is very important because it allows you to choose your desired typeface for the texts. By using this property, you can vary the fonts available based on the subject or emotions you want to convey.
The font-size property helps you adjust the text size itself. The text size should always be readable enough for users to have a good experience viewing your page.
For these texts to be more appealing and readable, the color property allows you to change the text color. Choosing an appropriate color can greatly affect the overall aesthetics of your site.
Similarly, by using the text-align property, you can determine the positioning of your texts. Options include left-aligned, right-aligned, centered, or justified.
Moreover, the line-height property is used to increase or decrease the spacing between lines of text, which can impact the readability of your text considerably.
Example CSS Code for Text
<style>
body {
font-family: 'Arial', sans-serif;
font-size: 16px;
color: #333333;
text-align: left;
line-height: 1.5;
}
h1 {
font-size: 2em;
color: #000000;
text-align: center;
}
p {
margin: 15px 0;
}
</style>
Explanation of Line by Line Code
body: The body tag refers to all the content of the page, and you can apply your desired style to all elements. font-family: By using this property, the Arial font is defined as the main typeface for the texts. font-size: The base font size for the main body text is set to 16px. color: The main text color is set to dark grey (#333333) to ensure good legibility. text-align: The text by default is set to left alignment. line-height: The line height is set to 1.5 times the font size, making it more readable. h1: This block is used to style the heading