CSS - Text

Hello there, future web developers! Today, we're diving into the wonderful world of CSS text properties. As your friendly neighborhood computer teacher, I'm excited to guide you through this journey. Remember, just like learning to ride a bike, mastering CSS takes practice, but I promise it'll be fun!

CSS Text - Text Color

Let's start with something colorful! In CSS, we can easily change the color of our text using the color property. It's like having a magical paintbrush for your words!

p {
  color: blue;
}

This simple line turns all your paragraph text blue. But wait, there's more! You can use color names, HEX codes, or RGB values:

h1 {
  color: #FF5733; /* HEX code for a vibrant orange */
}

span {
  color: rgb(50, 205, 50); /* RGB value for limegreen */
}

CSS Text - Text Alignment

Next up, let's talk about text alignment. It's like arranging books on a shelf - you can put them on the left, right, or center them nicely.

.left-align {
  text-align: left;
}

.right-align {
  text-align: right;
}

.center-align {
  text-align: center;
}

.justify-align {
  text-align: justify;
}

The justify value is particularly interesting. It spreads the text evenly across the line, like how newspapers arrange their columns.

CSS Text - Vertical Alignment

Vertical alignment is a bit trickier, but don't worry! It's most commonly used with inline or table-cell elements.

img {
  vertical-align: middle;
}

td {
  vertical-align: top;
}

This property can take values like top, middle, bottom, sub, super, and even specific length values!

CSS Text - Direction

In our global village, we often need to work with languages that read from right to left. That's where the direction property comes in handy:

.arabic-text {
  direction: rtl; /* Right to Left */
}

.english-text {
  direction: ltr; /* Left to Right */
}

CSS Text - Text Decoration

Want to add some flair to your text? Text decoration is your friend! It's like adding jewelry to your words.

.underline {
  text-decoration: underline;
}

.overline {
  text-decoration: overline;
}

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

.no-decoration {
  text-decoration: none;
}

Pro tip: Use text-decoration: none; to remove the default underline from links!

CSS Text - Text Decoration Skip

This property determines which parts of the text should be skipped when applying text decoration.

p {
  text-decoration: underline;
  text-decoration-skip: spaces;
}

This will underline the text but skip the spaces, creating a more polished look.

CSS Text - Text Decoration Skip Ink

This is a fun one! It decides whether the text decoration should be drawn over or under "ink" (i.e., the text itself).

p {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

With auto, the browser will intelligently skip the descenders of letters like 'g' or 'y'.

CSS Text - Text Transform

Want to shout in ALL CAPS or whisper in lowercase? Text transform is your go-to property!

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

The capitalize value is particularly neat - it turns the first letter of each word into a capital letter.

CSS Text - Text Emphasis

Text emphasis allows you to add emphasis marks to your text. It's like adding little dots or circles above or below your text.

.emphasis {
  text-emphasis: filled;
  text-emphasis-position: over right;
}

This adds filled circles above and to the right of each character.

CSS Text - Text Indentation

Remember when your teacher asked you to indent the first line of each paragraph? CSS can do that automatically!

p {
  text-indent: 50px;
}

This indents the first line of each paragraph by 50 pixels.

CSS Text - Letter Spacing

Letter spacing allows you to adjust the space between characters. It's like giving your letters some personal space!

h1 {
  letter-spacing: 5px;
}

This adds 5 pixels of space between each letter in your heading.

CSS Text - Word Spacing

Similar to letter spacing, but for entire words:

p {
  word-spacing: 10px;
}

This adds 10 pixels of extra space between each word.

CSS Text - White Space

The white-space property determines how white space inside an element is handled.

.nowrap {
  white-space: nowrap;
}

.pre {
  white-space: pre;
}

.pre-wrap {
  white-space: pre-wrap;
}

nowrap prevents text from wrapping to the next line, pre preserves white space as written in the HTML, and pre-wrap preserves white space but allows wrapping.

CSS Text - White Space Collapse

This property is actually part of the white-space property we just discussed. It determines how white space is collapsed.

CSS Text - Text Shadow

Want to add some depth to your text? Text shadow is here to help!

h1 {
  text-shadow: 2px 2px 5px red;
}

This adds a red shadow 2 pixels to the right, 2 pixels down, with a 5-pixel blur.

CSS Text - Line Break

The line-break property specifies how to break lines within words.

p {
  line-break: strict;
}

This enforces stricter line-breaking rules.

CSS Text - Word Break

Similar to line-break, but for breaking words at the end of lines:

p {
  word-break: break-all;
}

This allows words to be broken at any character.

CSS Text - Related Properties

Here's a quick reference table of all the properties we've discussed:

Property	Description
color	Sets the color of text
text-align	Specifies the horizontal alignment of text
vertical-align	Sets the vertical alignment of an inline or table-cell box
direction	Specifies the text direction/writing direction
text-decoration	Specifies the decoration added to text
text-decoration-skip	Specifies what parts of the element's content any text decoration affecting the element must skip over
text-decoration-skip-ink	Specifies how overlines and underlines are drawn when they pass over glyph ascenders and descenders
text-transform	Controls the capitalization of text
text-emphasis	Applies emphasis marks to text
text-indent	Specifies the indentation of the first line in a text-block
letter-spacing	Increases or decreases the space between characters in a text
word-spacing	Increases or decreases the white space between words
white-space	Specifies how white-space inside an element is handled
text-shadow	Adds shadow to text
line-break	Specifies how/if to break lines
word-break	Specifies line breaking rules for non-CJK scripts

And there you have it! You're now armed with the knowledge to style your text in countless ways. Remember, the key to mastering CSS is practice. So go forth, experiment, and create beautiful, readable web pages. Happy coding!

Credits: Image by storyset