CSS (Cascading Style Sheets) is used to style HTML elements and define how they should look in terms of layout, colors, fonts, and more. When it comes to styling text specifically, CSS provides a wide range of properties to control the appearance of text within HTML elements.
How to Write CSS for Text
CSS for text can be written within a `<style>` tag in the HTML document's `<head>`, in an external CSS file, or inline within an HTML element using the `style` attribute.
Example of CSS in `<style>` tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.text-example {
font-family: Arial, sans-serif;
font-size: 20px;
color: #333333;
line-height: 1.5;
text-align: center;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 2px;
}
</style>
<title>Text Styling Example</title>
</head>
<body>
<p class="text-example">This is an example of styled text.</p>
</body>
</html>
Example of CSS in an external file (styles.css):
1. HTML file (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Text Styling Example</title>
</head>
<body>
<p class="text-example">This is an example of styled text.</p>
</body>
</html>
2. CSS file (styles.css):
.text-example {
font-family: Arial, sans-serif;
font-size: 20px;
color: #333333;
line-height: 1.5;
text-align: center;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 2px;
}
Example of Inline CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Styling Example</title>
</head>
<body>
<p style="font-family: Arial, sans-serif; font-size: 20px; color: #333333; line-height: 1.5; text-align: center; text-decoration: underline; text-transform: uppercase; letter-spacing: 2px;">
This is an example of styled text.
</p>
</body>
</html>
Common CSS Properties for Text
font-family: Specifies the font of the text.
font-family: Arial, sans-serif;
font-size: Specifies the size of the text.
font-size: 20px;
color: Specifies the color of the text.
color: #333333;
line-height: Specifies the height of each line of text.
line-height: 1.5;
text-align: Specifies the alignment of the text.
text-align: center;
text-decoration: Specifies the decoration added to the text (e.g., underline, overline, line-through).
text-decoration: underline;
text-transform: Specifies the capitalization of the text.
text-transform: uppercase;
letter-spacing: Specifies the space between characters in the text.
letter-spacing: 2px;
font-weight: Specifies the weight (boldness) of the text.
font-weight: bold;
Type Text CSS
In CSS, the "type" or "text" typically refers to styling textual content within HTML elements. The properties mentioned above are all examples of how to style text using CSS. There is no specific property called "type text CSS," but rather a collection of properties that you use to style text.