--- title: "CSS – Text" url: https://khanwaseem.com/blog/course/css-text author: "khan Waseem" published: 2023-09-14 updated: 2023-09-14 topics: ["course", "CSS Tutorial"] description: "CSS (Cascading Style Sheets) – Text refers to the aspects of web design that involve styling and formatting textual content on a web page." --- # CSS – Text CSS (Cascading Style Sheets) – Text refers to the aspects of web design that involve styling and formatting textual content on a web page. CSS is a fundamental technology used to control the appearance of text, making it visually appealing and enhancing readability. Certainly, let’s explore and describe these CSS properties and terms: **1. Color**: The “color” property in CSS allows you to specify the color of text content or other elements on a webpage. It can be set using color names, hexadecimal codes, RGB values, or HSL values. **Example : ** ```xml

This is red text.

This is blue text.

This is green text.

Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/14133455/image-59.png) **In this example : ** In this example: - We define three CSS classes, `.red-text`, `.blue-text`, and `.green-text`, each with a different `color` value. - The `.red-text` class sets the text color to red. - The `.blue-text` class sets the text color to blue. - The `.green-text` class sets the text color to green. As a result, each paragraph demonstrates a different text color based on the CSS class applied to it. You can specify any valid color value in CSS, including color names (e.g., “red,” “blue”), hexadecimal color codes (e.g., “#FF0000” for red), RGB values, or HSL values, to control the text color as desired. **2.Text-Align**: “Text-align” is a CSS property used to control the horizontal alignment of text within an element. It can be set to values like “left,” “right,” “center,” or “justify” to determine how the text aligns within its container. **Example : ** ```xml

Center-Aligned Heading

This paragraph is center-aligned.

Right-Aligned Heading

This paragraph is right-aligned.

left-Aligned Heading

This paragraph is left-aligned.

justify-Aligned Heading

This paragraph is justify-aligned.

Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/14111040/image-44-1024x486.png) **In this example:** - We define two CSS classes, `**.centered-text**` and `**.right-aligned-text**`, each with different `**text-align**` values. - The `**text-align**` property with a value of **`center` **is applied to center-align text within elements with the class `**.centered-text**`. - The `**text-align**` property with a value of **`right` **is applied to right-align text within elements with the class `**.right-aligned-text**`. - The `**text-align**` property with a value of **`left`** is applied to left-align text within elements with the class `**.left-aligned-text**`. - The `**text-align**` property with a value of **`justify `**is applied to justify-align text within elements with the class `**.justify-aligned-text**`. - We use these CSS classes to apply the text alignment to both headings and paragraphs in the HTML document. As a result, the text within the elements with the class `.centered-text` will be center-aligned, and the text within the elements with the class `**.right-aligned-text**` will be right-aligned. **3.Text-Align-Last:** “Text-align-last” is a CSS property that specifies how the last line of text in a block or container should be aligned when “text-align” is set to “justify.” It can be set to values like “start,” “end,” “left,” “right,” or “center.” **Example** **:** ```xml

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis ante at nunc placerat.

Curabitur ac velit et orci varius malesuada vel sit amet odio.

Suspendisse potenti. Nulla facilisi. Donec nec sem at ipsum bibendum malesuada vel eget nulla.

Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/14112328/image-45.png) **In this example:** - We define a CSS class **`.justified-text`.** - We set `**text-align**` to `**justify**`, which justifies the text, causing it to stretch from the left to the right edges of the container. - We set `**text-align-last**` to `**center**`, which centers the last line of text in each paragraph within the container. As a result, the text is justified, meaning it is evenly spaced with the last line of each paragraph centered within the justified space. This can create a neater and more visually pleasing appearance for justified text, especially when dealing with uneven paragraph lengths. **4.Direction**: The “direction” property in CSS determines the text direction within an element. It can be set to “ltr” (left-to-right) or “rtl” (right-to-left) to accommodate languages and scripts that are written in different directions. **Example : ** ```xml

مرحبًا بك في موقع الويب الخاص بنا.

هذا مثال على النص باتجاه من اليمين إلى اليسار.

Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/14112916/image-46.png) **In this example:** - We define a CSS class **`.right-to-left-text`.** - We set the **`direction` **property to `**rtl**`, which specifies that the text within elements with this class should be displayed from right to left. As a result, the text within the **`div` **with the class `**.right-to-left-text**` is rendered with a right-to-left text direction. This is particularly useful for languages such as Arabic, Hebrew, or Persian, which are written from right to left. **5.Text-Indent**: “Text-indent” is a CSS property used to set the indentation of the first line of text within an element. You can specify values in pixels, percentages, or other units to control the amount of indentation. **Example : ** ```xml

This is a paragraph with an indented first line.

Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/14121148/image-47.png) **In this example:** - We define a CSS class **`.indented-paragraph`.** - We set the **`text-indent` **property to `**20px**`, which indents the first line of text within elements with this class by 20 pixels. As a result, the first line of the paragraph with the class `**.indented-**`**`paragraph` **is indented by 20 pixels, creating a visual separation between the first line and the rest of the text. This is often used for stylistic or formatting purposes in documents like essays and articles. **6.Letter-Spacing**: “Letter-spacing” allows you to control the spacing between individual characters in a block of text. It can be used to increase or decrease the space between letters for stylistic or readability purposes. **Example : ** ```xml

This is a paragraph with increased letter spacing. The CSS property letter-spacing is set to 2 pixels, which adds space between each character in this paragraph.

Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/14121404/image-48.png) **In this example:** - We define a CSS class `**.spaced-text**`. - We set the **`letter-spacing` **property to `**6px**`, which adds 6 pixels of spacing between each character within elements with this class. As a result, the text within the paragraph with the class `**.spaced-text**` has increased letter spacing, making the characters appear further apart. This can be used for stylistic effects or to improve the readability of text, especially in specific design contexts. **7.Word-Spacing**: Similar to “letter-spacing,” “word-spacing” controls the spacing between words in a block of text. It can be adjusted to modify the overall spacing between words for design or readability reasons. **Example : ** ```xml

This is a paragraph without spacing.

This is a paragraph with increased letter spacing.

Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/14124338/image-49.png) **In this example:** - We define a CSS class `**.spaced-text**`. - We set the `**word-spacing**` property to `**5px**`, which adds 5 pixels of spacing between each word within elements with this class. **8.White-Space**: The “white-space” property determines how white spaces, such as spaces and line breaks, are handled within an element. It can be set to values like “normal,” “nowrap,” or “pre” to control text wrapping and spacing. **Example : ** ```xml

This is a paragraph with white-space set to nowrap. It prevents the text from wrapping to the next line, even if the content exceeds the width of the container.

Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/14124614/image-50-1024x48.png) **In this example:** - We define a CSS class **`.nowrap-text`.** - We set the `**white-space**` property to `**nowrap**`, which prevents the text within elements with this class from wrapping to the next line. As a result, the text within the paragraph with the class `**.nowrap-text**` does not wrap to the next line, even if it exceeds the width of the container. This can be useful when you want to display code snippets, URLs, or other content where line breaks should be strictly controlled. **9.Text-Decoration**: “Text-decoration” is used to add decorative styling to text, such as underlines, overlines, or strikethroughs. It can be set to values like “underline,” “overline,” “line-through,” or “none” to control these decorations. **Example : ** ```xml

This text has an underline.

This text has an overline.

This text has a strikethrough.

This text has no decoration.

Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/14125726/image-51.png) **In this example:** - We define multiple CSS classes, each with a different `**text-decoration**` value. - The `**.underlined-text**` class applies an underline to the text. - The `**.overlined-text**` class applies an overline to the text. - The `**.strikethrough-text**` class applies a strikethrough to the text. - The `**.no-decoration**` class removes any text decoration. As a result, each paragraph demonstrates a different text decoration style: underlined, overlined, strikethrough, or no decoration at all, depending on the CSS class applied to it. **10.Text-Decoration-Skip**: “Text-decoration-skip” is a CSS property that specifies which elements, such as inline boxes or punctuation, should be skipped when applying text decorations like underlines or overlines. **Example : ** ```xml

This is some text with underlining. Spaces should be skipped.

This is some text with overlining. In some characters, ink is skipped.

Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/14125847/image-52.png) **In this example:** - We define two CSS classes, `**.underline-skip**` and `**.overline-skip**`, each with different `**text-decoration**` and `**text-decoration-skip**` values. - The `**.underline-skip**` class applies an underline to the text and specifies that spaces should be skipped when underlining. - The `**.overline-skip**` class applies an overline to the text and specifies that ink should be skipped when overlining. As a result, the first paragraph demonstrates text underlining where spaces are skipped, and the second paragraph demonstrates text overlining where ink in some characters is skipped according to the specified `**text-decoration-skip**` values. This allows for precise control over which elements should be affected by text decorations. **11.Text-Decoration-Skip-Ink**: “Text-decoration-skip-ink” is a more refined property that controls how ink (the actual characters in the text) should be skipped when applying text decorations. It helps ensure that decorations don’t overlap or interfere with the text. **Example : ** ```xml

This is underlined text.

This is overlined text. Some ink may not be skipped.

Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/14130104/image-53.png) **In this example:** - We define two CSS classes, `**.underlined-text**` and `**.overlined-text**`. - The `**.underlined-text**` class applies an underline to the text and specifies `**text-decoration-skip-ink: auto;**`, allowing the browser to handle ink skipping based on its default behavior. - The `**.overlined-text**` class applies an overline to the text and specifies `**text-decoration-skip-ink: none;**`, which means that no ink should be skipped when overlining. Please note that the actual behavior of **`text-decoration-skip-ink` **may depend on the browser’s support and specific implementation. Always verify compatibility with your target browsers before relying on this property in production. **12.Text-Transform**: “Text-transform” is used to change the capitalization of text within an element. It can be set to values like “uppercase,” “lowercase,” or “capitalize” to modify how text is displayed. **Example : ** ```xml

this text is transformed to uppercase.

THIS TEXT IS TRANSFORMED TO LOWERCASE.

this text is capitalized.

Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/14130237/image-54.png) **In this example:** - We define three CSS classes, `**.uppercase-text**`, `**.lowercase-text**`, and `**.capitalize-text**`, each with a different `**text-transform**` value. - The `**.uppercase-text**` class converts text to uppercase. - The `**.lowercase-text**` class converts text to lowercase. - The `**.capitalize-text**` class capitalizes the first letter of each word. As a result, each paragraph demonstrates a different text transformation style: uppercase, lowercase, or capitalized, depending on the CSS class applied to it. **13.Text-Emphasis**: “Text-emphasis” is a CSS property used to apply emphasis marks to text. Emphasis marks can be dots, circles, or other symbols placed above or below characters to draw attention to specific text. **Exmaple : ** ```xml

This is emphasized text with dots.

Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/14130641/image-55.png) **In this example:** - We define a CSS class **`.emphasized-text`.** - We set the `**text-emphasis**` property to `**dot**`, which adds dots as emphasis marks to the text within elements with this class. As a result, the text within the paragraph with the class `**.emphasized-text**` has dots added as emphasis marks, drawing attention to the text. The appearance of the emphasis marks may vary depending on the browser and CSS settings, but this example demonstrates the basic usage of the `**text-emphasis**` property. **14.Text-Shadow**: “Text-shadow” allows you to add shadows to text, creating a visual effect that adds depth and dimension. You can specify parameters like the shadow’s color, blur radius, and horizontal and vertical offsets. **Example: ** ```xml

Text with Shadow

This is some text with a shadow effect applied using CSS.

Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/14130805/image-56.png) **In this example:** - We define a CSS class **`.shadowed-text`.** - We set the `**text-shadow**` property to `**2px 2px 4px #888**`, which specifies the shadow’s horizontal offset, vertical offset, blur radius, and color. `**2px**` is the horizontal offset. - `**2px**` is the vertical offset. - `**4px**` is the blur radius, which controls the spread of the shadow. - `**#888**` is the color of the shadow, specified as a hexadecimal code. As a result, the text within the elements with the class `**.shadowed-text**` will have a shadow effect applied to it. The shadow in this example is a subtle gray shadow that adds depth to the text, making it appear as if it’s lifted off the page. You can adjust the values in the `**text-shadow**` property to achieve different shadow effects. **15.Line-Break**: “Line-break” is a CSS property that controls how lines are broken within a block of text. It can be set to values like “auto,” “loose,” or “normal” to determine how and where lines are broken when text wraps. **Example : ** ```xml

Automatic Line Break

This is a long paragraph with automatic line breaking enabled. It will wrap to the next line when necessary to fit the container width.

Loose Line Break

This is a long paragraph with loose line breaking enabled. Lines may break more freely within words to fit the container width.

Normal Line Break

This is a long paragraph with normal line breaking. Lines will break at spaces and word boundaries to fit the container width.

Code language: HTML, XML (xml) ``` **Output** : ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/14130957/image-57-1024x373.png) **In this example:** - We define three CSS classes, **`.line-break-auto`, `.line-break-loose`**, and `**.line-break-normal**`, each with different `**line-break**` values. - The `**.line-break-auto**` class enables automatic line breaking, allowing lines to wrap to the next line when necessary to fit the container width. - The `**.line-break-loose**` class enables loose line breaking, which may break lines more freely within words to fit the container width. - The `**.line-break-normal**` class uses normal line breaking, where lines break at spaces and word boundaries to fit the container width. As a result, each paragraph demonstrates a different line-breaking behavior based on the CSS class applied to it. You can choose the line-breaking style that best suits your design and content layout needs. **16.Word-Break**: “Word-break” is a CSS property that determines how words are broken when they exceed the container’s width. It can be set to values like “normal” or “break-all” to control word wrapping and breaking behavior. **Example : ** ```xml

Normal Word Break

This is a longwordthatshouldnotbreak, but will break normally when necessary to fit the container width.

Break-All Word Break

Thisisalongwordthatwillbreakwherevernecessarytosatisfycontainerwidth.

Keep-All Word Break

Thisisalongwordthatshouldnotbreak, and it will keep words together as much as possible to fit the container width.

Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/14131141/image-58.png) **In this example:** - We define three CSS classes, `**.normal-word-break**`, `**.break-all-word-break**`, and `**.keep-all-word-break**`, each with different `**word-break**` values. - The `**.normal-word-break**` class enables normal word breaking, where words break at spaces and word boundaries to fit the container width. - The `**.break-all-word-break**` class enables `**break-all**` word breaking, which allows words to break wherever necessary to satisfy the container width. - The `**.keep-all-word-break**` class uses `**keep-all**` word breaking, which keeps words together as much as possible to fit the container width. As a result, each paragraph demonstrates a different word-breaking behavior based on the CSS class applied to it. You can choose the word-breaking style that best suits your design and content layout needs. These CSS properties and terms provide fine-grained control over text presentation and layout, allowing web designers and developers to create visually appealing and readable content on websites. ### Related posts: [CSS – Links](https://blog.khanwaseem.com/css-links/) [CSS – Fonts](https://blog.khanwaseem.com/css-fonts/) [CSS – Table](https://blog.khanwaseem.com/css-table/) [CSS – Border](https://blog.khanwaseem.com/css-border/) Powered by [YARPP](https://yarpp.com).