CSS 5 🎨 How To Text Styling

5. How-To Text Styling

1. How to Change Text Color

Steps: Use color property with color name, hex code, or RGB values

p { color: blue; }
h1 { color: #ff0000; }
span { color: rgb(255, 0, 0); }

2. How to Set Font Family

Steps: Use font-family with specific font names or generic families

p { font-family: Arial, sans-serif; }
h1 { font-family: "Times New Roman", serif; }
div { font-family: monospace; }

3. How to Adjust Font Size

Steps: Use font-size with units like px, em, rem, %, pt

p { font-size: 16px; }
h1 { font-size: 2em; }
span { font-size: 150%; }

4. How to Make Text Bold

Steps: Use font-weight with values like normal, bold, or numeric values

p { font-weight: bold; }
h1 { font-weight: 700; }
span { font-weight: lighter; }

5. How to Align Text Horizontally

Steps: Use text-align with left, right, center, or justify values

p { text-align: center; }
h1 { text-align: right; }
div { text-align: justify; }

6. How to Control Line Spacing

Steps: Use line-height with numbers or units to adjust spacing

p { line-height: 1.5; }
h1 { line-height: 20px; }
span { line-height: 120%; }

7. How to Add Text Underline

Steps: Use text-decoration with underline value

a { text-decoration: underline; }
p { text-decoration: underline; }
h1 { text-decoration: none; }

8. How to Transform Text to Uppercase

Steps: Use text-transform with uppercase, lowercase, or capitalize

p { text-transform: uppercase; }
h1 { text-transform: lowercase; }
span { text-transform: capitalize; }

9. How to Add Text Strike-through

Steps: Use text-decoration with line-through value

del { text-decoration: line-through; }
p { text-decoration: line-through; }
span { text-decoration: none; }

10. How to Add Text Overline

Steps: Use text-decoration with overline value

p { text-decoration: overline; }
h1 { text-decoration: overline; }
span { text-decoration: none; }

11. How to Combine Multiple Text Properties

Steps: Apply multiple properties to same element

.title {
    color: red;
    font-family: Arial;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    line-height: 1.6;
    text-transform: uppercase;
}

12. How to Create Text Shadow Effect

Steps: Use text-shadow with color, horizontal offset, vertical offset, blur radius

h1 { 
    text-shadow: 2px 2px 4px #000000; 
}
p { 
    text-shadow: 1px 1px 2px gray; 
}
span { 
    text-shadow: none; 
}

13. How to Apply Italic Styling

Steps: Use font-style property with italic value

em { font-style: italic; }
p { font-style: normal; }
h1 { font-style: oblique; }

14. How to Adjust Letter Spacing

Steps: Use letter-spacing to control space between characters

p { letter-spacing: 2px; }
h1 { letter-spacing: -1px; }
span { letter-spacing: normal; }

15. How to Control Word Spacing

Steps: Use word-spacing to adjust space between words

p { word-spacing: 5px; }
h1 { word-spacing: -2px; }
span { word-spacing: normal; }

16. How to Set Text Direction

Steps: Use direction property for right-to-left text

div { 
    direction: rtl; 
    text-align: right;
}
p { 
    direction: ltr; 
    text-align: left;
}

17. How to Create Text Highlight Effect

Steps: Combine background-color and color properties

.highlight {
    background-color: yellow;
    color: black;
}
p { 
    background-color: transparent; 
    color: inherit;
}

18. How to Apply Different Font Weights

Steps: Use numeric values for font weight (100-900)

thin { font-weight: 100; }
normal { font-weight: 400; }
bold { font-weight: 700; }
black { font-weight: 900; }

19. How to Create Text Gradient Effect

Steps: Use background with -webkit-linear-gradient

.gradient-text {
    background: -webkit-linear-gradient(blue, red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

20. How to Make Text Wrap Properly

Steps: Use white-space and word-wrap properties

p { 
    white-space: normal; 
    word-wrap: break-word;
}
pre { 
    white-space: pre-wrap; 
    word-wrap: break-word;
}

21. How to Control Text Overflow

Steps: Use text-overflow with ellipsis for truncated text

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
p { 
    text-overflow: clip; 
    overflow: hidden;
}

22. How to Apply Text Effects with Multiple Properties

Steps: Combine all text properties for complex styling

.complex-text {
    color: #333333;
    font-family: Georgia, serif;
    font-size: 18px;
    font-weight: bold;
    text-align: justify;
    line-height: 1.6;
    text-decoration: underline;
    text-transform: capitalize;
    letter-spacing: 1px;
}

23. How to Create Responsive Text Sizing

Steps: Use clamp() function for responsive fonts

.responsive-text {
    font-size: clamp(1rem, 2.5vw, 2rem);
}
h1 { 
    font-size: clamp(1.5rem, 4vw, 3rem); 
}
p { 
    font-size: clamp(0.8rem, 1.5vw, 1.2rem); 
}

24. How to Apply Text Color Gradient

Steps: Use background with gradient and text clipping

.gradient-color {
    background: linear-gradient(45deg, red, yellow, blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

25. How to Create Text Outline Effect

Steps: Use text-shadow multiple times for outline effect

.outline {
    color: white;
    text-shadow: 
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

26. How to Use Custom Fonts from Google Fonts

Steps: Import font via CSS and apply with font-family

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
    font-family: 'Roboto', sans-serif;
}

27. How to Create Text Animation Effects

Steps: Use CSS animations with text properties

.animated-text {
    animation: color-change 3s infinite alternate;
}

@keyframes color-change {
    0% { color: red; }
    100% { color: blue; }
}

28. How to Apply Text Styles to Specific Elements

Steps: Target specific HTML elements with text styling

h1, h2, h3 {
    font-family: 'Arial Black', sans-serif;
    color: #2c5aa0;
    text-transform: uppercase;
}

p {
    font-size: 16px;
    line-height: 1.5;
    text-align: justify;
}

29. How to Create Text Stacking Effect

Steps: Use multiple text-shadow values for layered text

.stacked-text {
    color: #ff0000;
    text-shadow: 
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 15px #ff0000,
        0 0 20px #ff0000;
}

30. How to Implement Text Hover Effects

Steps: Use :hover pseudo-class with text properties

.link:hover {
    color: #ff6b6b;
    text-decoration: underline;
    letter-spacing: 2px;
}

p:hover {
    font-weight: bold;
    text-transform: uppercase;
}

31. How to Create Text with Background Effect

Steps: Use background-color with padding and text properties

.text-with-bg {
    background-color: #f0f0f0;
    padding: 5px 10px;
    color: #333;
    border-radius: 4px;
    font-weight: bold;
}

32. How to Apply Text Styles to Lists

Steps: Style list items with text properties

ul li {
    color: #666;
    font-size: 14px;
    text-align: left;
    line-height: 1.4;
    margin-bottom: 5px;
}

ol li {
    color: #333;
    font-weight: bold;
}

33. How to Create Text with Border Effect

Steps: Use border properties with text styling

.bordered-text {
    border: 2px solid #333;
    padding: 10px;
    margin: 10px;
    color: #333;
    font-weight: bold;
}

34. How to Use Text Properties in Responsive Design

Steps: Apply text styles that adapt to screen sizes

.responsive-header {
    font-size: clamp(1rem, 3vw, 2rem);
    text-align: center;
    line-height: 1.3;
    color: #2c5aa0;
}

@media (max-width: 768px) {
    .responsive-header {
        font-size: 1.5rem;
        text-align: left;
    }
}

35. How to Combine Text and Background Properties

Steps: Use both background and text properties together

.combined-style {
    background-color: #f8f9fa;
    color: #212529;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
}