Thursday, April 4, 2019

Chapter 9: CSS Text Properties

Chapter 9: CSS Text Properties



Inherited: Yes

Color

You can set the color of text with the following:

color: value;                 
Possible values are

  color name - example:(red, black...)

  hexadecimal number - example:(#ff0000, #000000)

  RGB color code - example:(rgb(255, 0, 0), rgb(0, 0, 0))


Letter Spacing

You can adjust the space between letters in the following manner. Setting the value to 0 prevents the text from justifying. You can use negative values.

letter-spacing: value;

Possible values are

 normal

 length


Example:

T h e s e  l e t t e r s  a r e  s p a c e d  a t  5 p x .

Text Align

You can align text with the following:

text-align: value;

Possible values are

 left

 right

 center

 justify

Examples:

This text is aligned left.

This text is aligned in the center.

This text is aligned right.

This text is justified.


Text Decoration
You can decorate text with the following:

text-decoration: value;

Possible values are

 none

 underline

 overline

 line through

 blink

 Examples:

This text is underlined.
  
This text is overlined.

This text has a line through it.

This text is blinking (not in internet explorer).

Text Indent

You can indent the first line of text in an (X)HTML element with the following:

text-indent: value;

Possible values are

 length

 percentage


Examples:

This text is indented 10px pixels.

Text Transform

You can control the size of letters in an (X)HTML element with the following:

text-transform: value;

Possible values are

 none

 capitalize

 lowercase

Examples:

This First Letter In Each Word Is Capitalized, Though It Is Not In My File.

THIS TEXT IS ALL UPPERCASE, THOUGH IT IS ALL LOWERCASE IN MY FILE.

this text is all lowercase. though it is all uppercase in my file.


White Space

You can control the whitespace in an (X)HTML element with the following:

white-space: value;

Possible values are

 normal

 pre

 nowrap


Word Spacing

You can adjust the space between words in the following manner. You can use negative values.

word-spacing: value;

Possible values are

 normal

 length


Example:


These words are spaced at 5px.

0 comments: