CSS Text Styling

Master the art of styling text in CSS with fonts, alignment, spacing, decorations, and shadows.

This guide helps you understand how to style text effectively in CSS to enhance readability and visual appeal.

✍️ What is CSS Text Styling?

CSS Text Styling controls the appearance of text on a webpage, including the font, size, alignment, spacing, transformations, and more. Proper text styling improves the user experience and aesthetics of your web pages.

🛠️ Text Styling Properties

Defines the typeface of the text.

import './styles.css';

function App() {
return (
  <div>
    <h1 className="font-family-example">Styled Heading</h1>
  </div>
);
}

export default App;

Open Sandbox

Controls the size and boldness of the text.

import './styles.css';

function App() {
return (
  <div>
    <h1 className="font-size-weight-example">Styled Heading</h1>
  </div>
);
}

export default App;

Open Sandbox

Sets the vertical space between lines.

import './styles.css';

function App() {
return (
  <div>
    <p className="line-height-example">This is a paragraph with custom line height.</p>
  </div>
);
}

export default App;

Open Sandbox

Aligns text within its container.

import './styles.css';

function App() {
return (
  <div>
    <h1 className="text-align-example">Styled Heading</h1>
  </div>
);
}

export default App;

Open Sandbox

Controls the capitalization of text.

import './styles.css';

function App() {
return (
  <div>
    <h2 className="text-transform-example">Styled Heading</h2>
  </div>
);
}

export default App;

Open Sandbox

Adds decoration like underline, overline, or line-through.

import './styles.css';

function App() {
return (
  <div>
    <a href="#" className="text-decoration-example">Styled Link</a>
  </div>
);
}

export default App;

Open Sandbox

Sets space between letters.

import './styles.css';

function App() {
return (
  <div>
    <h3 className="letter-spacing-example">Styled Heading</h3>
  </div>
);
}

export default App;

Open Sandbox

Sets space between words.

import './styles.css';

function App() {
return (
  <div>
    <p className="word-spacing-example">This is a paragraph with custom word spacing.</p>
  </div>
);
}

export default App;

Open Sandbox

Defines the style of the font (normal, italic, oblique).

import './styles.css';

function App() {
return (
  <div>
    <em className="font-style-example">Styled Text</em>
  </div>
);
}

export default App;

Open Sandbox

Adds shadow to the text.

import './styles.css';

function App() {
return (
  <div>
    <h1 className="text-shadow-example">Styled Heading</h1>
  </div>
);
}

export default App;

Open Sandbox

🧪 Try Yourself

import './styles.css';

function App() {
return (
  <div>
    <h1 className="shadow-text">Styled Heading</h1>
    <p className="styled-paragraph">This is a styled paragraph with custom spacing and alignment.</p>
  </div>
);
}

export default App;

Open Sandbox

CSS Text Styling

✍️ What is CSS Text Styling?

🛠️ Text Styling Properties

🧪 Try Yourself

On this page