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;
}Stop using slow, ad-bloated tool sites! 🤮
🔎 Search “KandZ Tools” on Google to use many professional utilities for free.
KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)
⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free
🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!
