CSS Text

CSS CODES & EXAMPLES

CSS Text

Learn how to style, align, transform, decorate and control text using powerful CSS text properties.

What is CSS Text?

Control the appearance of text

CSS provides many properties for controlling the appearance and layout of text. You can change text color, alignment, spacing, decoration, transformation, indentation, shadows and more.

Example: color: #1769d5;

CSS Text Color

Change the color of text

The color property defines the foreground color of text.

text-color.css

h2 {
  color: #1769d5;
}

p {
  color: #526176;
}

Shree Narayan Computers & Education Center

Learn practical computer skills with confidence.

Text Alignment

Align text horizontally

Use text-align to control the horizontal alignment of text.

text-align.css

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.justify {
  text-align: justify;
}

Left aligned text

Center aligned text

Right aligned text

CSS allows developers to control the alignment and presentation of text on a webpage.

Text Align Last

Control the last line of text

The text-align-last property controls the alignment of the last line in a text block.

text-align-last.css

p {
  text-align: justify;
  text-align-last: center;
}

CSS text properties help create clean, readable and professional website content.

Text Decoration

Underline, overline and line-through

The text-decoration property adds decorative lines to text.

text-decoration.css

.underline {
  text-decoration: underline;
}

.overline {
  text-decoration: overline;
}

.line-through {
  text-decoration: line-through;
}

Underlined Text

Overlined Text

Line Through Text

Text Decoration Style

Change the decoration pattern

decoration-style.css

.solid {
  text-decoration-line: underline;
  text-decoration-style: solid;
}

.dashed {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

.dotted {
  text-decoration-line: underline;
  text-decoration-style: dotted;

}

.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

Solid Underline

Dashed Underline

Dotted Underline

Wavy Underline

Text Transform

Change letter capitalization

text-transform.css

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

computer education center

COMPUTER EDUCATION CENTER

computer education center

Text Indent

Add space before the first line

The text-indent property specifies the indentation of the first line of a text block.

text-indent.css

p {
  text-indent: 40px;
}

CSS makes it possible to control the presentation of text. Text indentation can be useful for creating traditional paragraph layouts and improving visual structure.

Letter Spacing

Control the space between letters

letter-spacing.css

h2 {
  letter-spacing: 2px;
}

.small-spacing {
  letter-spacing: -0.5px;
}

LEARNING

Line Height

Control vertical spacing between lines

The line-height property controls the distance between lines of text.

line-height.css

.comfortable {
  line-height: 1.8;
}

.compact {
  line-height: 1.2;
}

Comfortable

CSS is used to design and style webpages. Proper line height improves readability and makes long paragraphs easier to read.

Compact

CSS is used to design and style webpages. Proper line height improves readability and makes long paragraphs easier to read.

Word Spacing

Control the space between words

word-spacing.css

p {
  word-spacing: 10px;
}

Learn practical computer skills online.

White Space

Control how whitespace is handled

The white-space property controls how spaces, line breaks and wrapping are handled.

Text Shadow

Add shadow effects to text

text-shadow.css

h2 {
  text-shadow:
    2px 2px 5px rgba(0,0,0,.25);
}

CSS Text Shadow

Beautiful typography with subtle depth.

Text Overflow

Handle text that does not fit

The text-overflow property can display an ellipsis when text overflows its container.

text-overflow.css

.text-overflow {
  width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

This is a very long course title that will be shortened with an ellipsis when it does not fit inside the container.

Word Break

Control how words break

word-break.css

.break-word {
  word-break: break-word;
}

.break-all {
  word-break: break-all;
}

break-word

VeryLongComputerEducationCourseNameExample

break-all

VeryLongComputerEducationCourseNameExample

Overflow Wrap

Prevent long words from overflowing

overflow-wrap.css

p {
  overflow-wrap: break-word;
}

AReallyLongComputerEducationExampleThatNeedsToWrapInsideItsContainer

Vertical Align

Align inline or table-cell content vertically

vertical-align.css

span {
  vertical-align: middle;
}

Computer Education Center

Text Direction

Control left-to-right or right-to-left direction

direction.css

.ltr {
  direction: ltr;
}

.rtl {
  direction: rtl;
}

Left to Right Text

Right to Left Text

Practical Course Card

Combine multiple CSS text properties

FEATURED COURSE

Diploma in Computer Application

Learn computer fundamentals, office applications, internet, digital services and practical workplace skills.

Job-Oriented Course View Course →

course-card.css

.course-card h3 {
  text-transform: capitalize;
  letter-spacing: -.3px;
  line-height: 1.3;
}

.course-card p {
  line-height: 1.8;
  text-align: left;
}

.course-card a {
  text-decoration: none;
  font-weight: 700;
}