- CSS Tutorial
- CSS Introduction
- CSS Syntax
- CSS Comments
- CSS Selectors
- CSS Fonts
- CSS Colors
- CSS Backgrounds
- CSS Box Model
- CSS Borders
- CSS Margins
- CSS Padding
- CSS Text
- CSS Images
- CSS Links
- CSS Lists
- CSS Tables
- CSS Outline
- CSS Icons
- CSS Display
- CSS max-witdh
- CSS Position
- CSS z-index
- CSS Overflow
- CSS Float
- CSS Align
- CSS Opacity
- CSS Navigation Bar
- CSS Dropdowns
- CSS Forms
- CSS Units
- CSS !important
- CSS Specificity
- CSS Combinators
- CSS inline-block
- CSS Hover
- CSS Cursors
- CSS Selectors
- CSS Type Selector
- CSS Class Selector
- CSS ID Selector
- CSS Attribute Selector
- CSS Pseudo-class Selector
- CSS Pseudo-element Selector
- CSS Universal Selector
- CSS Advanced
- CSS Text Formatting
- CSS Gradients
- CSS Shadow
- CSS Rounded Corners
- CSS Text Effects
- CSS 2D Transform
- CSS 3D Transform
- CSS Border Images
- CSS Inherit
- CSS Transitions
- CSS Animations
- CSS Box Sizing
- CSS Tooltip
- CSS Masking
- CSS Pagination
- CSS Styling Images
- CSS object-fit
- CSS object-position
- CSS Buttons
- CSS Multiple Columns
- CSS Variables
- CSS Flexbox
- CSS Grid
- CSS Media Queries
CSS: Text Formatting
Text formatting in CSS involves a wide range of properties that allow you to control the appearance of text on a webpage. Here are some key properties and how to use them:
Basic Text Properties
Color
color: #333333; /* Sets the text color */
Font Family
font-family: 'Arial', sans-serif; /* Sets the font family */
Font Size
font-size: 16px; /* Sets the font size */
Font Weight
font-weight: bold; /* Sets the font weight (e.g., normal, bold, 100-900) */
Font Style
font-style: italic; /* Sets the font style (e.g., normal, italic, oblique) */
Font Variant
font-variant: small-caps; /* Sets the font variant (e.g., normal, small-caps) */
Text Align
text-align: center; /* Aligns text (e.g., left, right, center, justify) */
Advanced Text Properties
Text Decoration
text-decoration: underline; /* Adds decoration to text (e.g., none, underline, overline, line-through) */
Text Transform
text-transform: uppercase; /* Transforms text (e.g., none, capitalize, uppercase, lowercase) */
Text Shadow
text-shadow: 2px 2px 4px #888888; /* Adds shadow to text */
Letter Spacing
letter-spacing: 2px; /* Sets the space between characters */
Line Height
line-height: 1.5; /* Sets the height of a line of text */
Text Indent
text-indent: 50px; /* Indents the first line of text */
Word Spacing
word-spacing: 4px; /* Sets the space between words */
White Space
white-space: nowrap; /* Controls how whitespace is handled (e.g., normal, nowrap, pre) */
Text Overflow
text-overflow: ellipsis; /* Handles overflowed text (e.g., clip, ellipsis) */
CSS Example
Here’s an example that combines several of these properties to style a paragraph element:
p {
color: #333;
font-family: 'Arial', sans-serif;
font-size: 16px;
font-weight: normal;
font-style: italic;
font-variant: small-caps;
text-align: justify;
text-decoration: none;
text-transform: capitalize;
text-shadow: 1px 1px 2px #bbb;
letter-spacing: 1px;
line-height: 1.5;
text-indent: 30px;
word-spacing: 2px;
white-space: normal;
text-overflow: clip;
}
Additional Properties and Tips
Vertical Align
vertical-align: middle; /* Aligns text vertically (e.g., baseline, sub, super, top, text-top, middle, bottom, text-bottom) */
Direction
direction: rtl; /* Sets the text direction (e.g., ltr for left-to-right, rtl for right-to-left) */
Unicode Bidi
unicode-bidi: bidi-override; /* Controls the embedding level and directionality of text */
Font Stretch
font-stretch: expanded; /* Adjusts the text's width (e.g., normal, ultra-condensed, extra-condensed, condensed, s
emi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded) */
By using these properties, you can achieve precise control over the presentation of text on your web pages, ensuring readability and aesthetic appeal. Adjust the properties according to your design requirements and the specific context of your content.