CSS Text Property | CSS For Beginners | Lesson 4
The CSS text property gives the web developers the ability to determine how text is rendered on a web page. Here is how you can work with different CSS properties concerning the text in order to make it more readable and stylish and align the text properly.
Check full source code: Google Drive Direct Download Link Generator
All these properties provide full control on the appearance of the text which allows for enhanced creation of proper structures of articles and enhanced aesthetics of the articles to the readers.
In this article, we’ll take a look at the most important CSS text properties, their usage and how you could apply them into your projects. We will also include example code which will help in illustrating the various properties.
Want free codes for stunning responsive cards? Dive in now!
- Modern Responsive Card
- Glowing Card
- Product Card
- JV Responsive Card Slider
- Product Card With Quick View Popup Effect
What are Major CSS Text Properties?
Here’s a list of the most important CSS text properties that you’ll use in web development:
- color: Defines the color of the text.
- text-align: This sets the text to left, centre, right or starting and ending at the left, starting and ending at the right or fully justified.
- font-family: Determines the font that has to be used (e. g.: Arial, Tahoma, Verdana).
- text-decoration: Used for appending decoration such as underline, overline, or line through.
- font-weight: Refers to the degree of thin or thick font ranging from 100 to 900 values.
- font-style: Switches the font style to either italic or normal for the selected text.
- text-transform: Coverts the text to the lowercase, uppercase or capital letters according to the pre defined instruction.
- letter-spacing: Alters the distance between one or two characters.
- word-spacing: Sets the spaces between the words.
- line-height: Prescribes the distance between lines, which affects vertical text distribution.
- text-indent: Puts a tab line on the first line of the new paragraph.
- text-shadow: Shadows the text so that the two layers give an impression of depth on the screen.
- writing-mode: Defines the orientation of the text, either horizontal or vertical.
- word-wrap: If the word does not fit on the line, breaks it to the next line.
- word-break: Divides words that extend to the next line to ensure that they fit, which is helpful when dealing with lengthy words.
Example Code Using CSS Text Properties
Now I will show you how the mentioned text properties can be used in an example. Following is the code to format text on a webpage with the help of CSS text properties:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Text Properties Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.text-container {
color: red; /* Text color */
text-align: justify; /* Aligns text evenly across the container */
font-family: 'Arial', 'Tahoma', 'Verdana'; /* Specifies fonts */
text-decoration: underline; /* Underlines the text */
font-weight: bold; /* Makes the font bold */
font-style: italic; /* Italicizes the text */
text-transform: capitalize; /* Capitalizes the first letter of each word */
letter-spacing: 10px; /* Adds space between letters */
word-spacing: 10px; /* Adds space between words */
line-height: 20px; /* Sets the height between lines of text */
text-indent: 50px; /* Indents the first line of text */
text-shadow: 2px 2px 4px gray; /* Adds a shadow effect to the text */
writing-mode: vertical-rl; /* Displays text vertically from right to left */
word-wrap: break-word; /* Breaks long words and wraps them to the next line */
word-break: break-all; /* Breaks words when necessary to prevent overflow */
padding: 20px;
background-color: #fff;
}
</style>
</head>
<body>
<div class="text-container">
<p>This is an example of how to use various CSS text properties. The text is aligned, styled, and decorated with different text properties that enhance readability and aesthetics. The font is bold, italic, underlined, and has added letter spacing and word spacing. Additionally, the text has a shadow effect and is written vertically from right to left.</p>
</div>
</body>
</html>Conclusion
The CSS text property provide a number of choices to manage the look of text on your web page. Alignment and font Family And sizes, shadows and spacing are some of the key properties that when mastered will enable one to present text that is both elegant and easy to read.
Use different types of text combinations to add professionalism to your web pages and make them more attractive.
Wherever you want to apply the styling of text, when you know these CSS properties, you are at the advanced level of text styling.
Want free codes for stunning image sliders? Dive in now!
