CSS

Last Updated: 11/14/2022

Text Formatting

Text Alignment

  • Used to set the horizontal alignment of a text.
  • Possible values are left, center, right, justify
  • So for the web, the best alignment is left, but sometimes you may want to use Center Alignment
p {
    width: 50ch;
    text-align: left;
}

Text Decoration

  • Used to add a decoration line to text.
  • For text decoration line possible values are underline, line-through, overline
text-decoration-line: underline;
text-decoration-color: green;  
text-decoration-style: solid
text-decoration-thickness:  5px;

Shorthand

  • text-decoration-line is required and others are optional
text-decoration: underline;
text-decoration: underline red double 5px;
  • By default links are underlined.
a {
text-decoration: none;
}

Text Indentation

  • Used to specify the indentation of the first line of a text:
text-indent: 1rem;

Text Transformation

  • Used to specify uppercase and lowercase letters in a text.
  • Possible values are uppercase, lowercase, capitalize
  • Capitalize the first letter of every word, useful for headings
text-transform: capitalize;

White Space

  • Specifies how white-space inside an element is handled.
  • Disable text wrapping inside an element using no-wrap
p {
    width: 50ch;
    white-space: nowrap;
    overflow: hidden;
}

Text Overflow

  • Specifies how overflowed content that is not displayed should be signaled to the user
  • Possible values are ellipsis, clipped
p {
    width: 50ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Text Direction

  • Used to change the text direction of an element:
  • Default value is ltr
  • Possible values are ltr, rtl
  • unicode-bidi: used together with the direction property, determines how bidirectional text in a document is handled.
p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

Text Shadow

  • Used to add shadow to text.
  • You specify the horizontal shadow and the vertical shadow

Basic Syntax

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

With shadow color

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

With blur effect


h1 {
	text-shadow: 2px 2px 5px blue;
}
h1 {  
	color:  white;  
	text-shadow:  2px 2px 4px #000000;  
}

Multiple Shadow

h1 {
  text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}

Multiple Columns

  • Allows easy definition of multiple columns of text
  • column-count property specifies the number of columns an element should be divided into
  • column-gap property specifies the gap between the columns.
  • column-rule property is a shorthand property for setting all the column-rule
  • column-span property specifies how many columns an element should span across. Possible values are all, none
  • column-width property specifies a suggested, optimal width for the columns. Number of columns changes based on the width
.multi-col {
    column-count: 3;
    column-gap: 2rem;
    column-rule: 5px solid blue;
}
.multi-col h1 {
    column-span: all;
}

<div class="multi-col">
    <h1 >Multi Columns</h1>
    <p>some large text...</p>
</div>

Column width

.multi-col {
    column-width: 30ch;
    column-gap: 2rem;
    column-rule: 5px solid blue;
}
Previous
Next