CSS tutorial

Text styling

.textdiv {
  font-size: 16px;
  color: red; /* text color */
  text-decoration: underline;
  text-transform: capitalize;
  text-indent: 2rem;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 4px;
  word-spacing: 1.5rem;
  white-space: nowrap;
}
css property description
font-size Sets the font size of element. In addition to numeric and percent values, it can take on the following special values:
  • medium - medium size (default value)
  • small - small size
  • x-small - extra small size
  • xx-small - xx-small size
  • smaller - sets the font-size to a smaller size than the parent element
  • large - large size
  • x-large - extra large size
  • xx-large - xx-large size
  • larger - sets the font-size to a larger size than the parent element
color Defines foreground color, that used for text and the text decoration.
text-decoration-line Sets the kind of decoration. You can specify multiple values separated by a space. Possible values are:
  • underline - underline every line of text
  • overline - draws line above every line of text
  • line-through - strikethroughs each line of text
  • none - remove decoration from text
text-decoration-color Sets color for decoration.
text-decoration-style Sets style of decoration. Possible vaules are:
  • solid - draws decoration as single line (default)
  • double - draws decoration as double line
  • dotted - draws decoration as dotted line
  • dashed - draws decoration as dashed line
  • wavy - draws decoration as wavy line
text-decoration-thickness Possible vaules are:
  • auto - the browser will choose an appropriate width for the text decoration line
  • from-font - uses the value from the font file if it exists
  • <length> - sets the thickness of text decoration line as the absolute length value like 4px
  • <percentage> sets the thickness of text decoration line as a percent of 1em in the current font
text-decoration Shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness properties.
text-underline-offset Sets the offset distance of an underline line from its original position. Possible vaules are:
  • auto - the browser will choose an appropriate offset
  • <length> - sets the offset as the absolute length value like 4px
  • <percentage> sets the thickness of text decoration line as a percent of 1em in the current font
text-indent Sets the length of empty space that is put before lines of text in a block. Possible values: absolute length, for example 4px or a percentage of the width of the text block. In the first case, negative values are allowed.
letter-spacing Sets the spacing between text characters.
word-spacing Sets the spacing between words.
white-space Sets how white space inside an element is handled. Possible values are:
  • normal - sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.
  • nowrap - sequences of white space are collapsed. Line breaks are suppressed.
  • pre - all white spaces and line breaks are preserved.
  • pre-wrap - all white spaces and line breaks are preserved. Additionally lines are broken as necessary to fill line boxes.
  • pre-line - sequences of white space are collapsed. Line breaks are preserved. Additionally lines are broken as necessary to fill line boxes.
  • break-spaces - such as pre-wrap except
    • any sequence of preserved white space always takes up space, including at the end of the line
    • a line breaking opportunity exists after every preserved white space character, including between white space characters
    • such preserved spaces take up space and do not hang, and thus affect the box’s intrinsic sizes (min-content size and max-content size)
tab-size Sets the width of tab characters. Possible values are
  • <integer> - specifies width in characters, like 4
  • <length> - specifies width as the absolute length value like 4px
text-transform Defines a case of text elements. Possible values are:
  • capitalize - converts the first letter of each word to uppercase
  • lowercase - converts all characters to lowercase
  • uppercase - converts all characters to uppercase