HTML CSS Text Properties

Color

Example: 

		
				.redText {
					color: red;
				}

This sets the color of text red in the class "redText".

Methods of Stating Color Values

  • name: ("red", "yellow", "blue, etc.)
  • Hexadecimal #000000 - #FFFFFF
  • Red, Green Blue rgb(0,0,0) - rgb(255,255,255)
  • Hue Saturation Level uses a percentage hsl(0%,0%,0%) - hsl(100%,100%,100%)
Here is a list of all the color names available. with examples and hexadecimal values. This page explains color values, using names, hexadecimal numbers and rgb() numbers

W3C has a color picker which enables you to choose exact values

Letter Spacing

You can define a length of space between letters using pixels as follows 

	
			.mySpacedText{
					letter-spacing: 6px ;
			}
This create a class "mySpacedText" which spaces the letters 4 pixels apart. Which looks like this! You can also specify "normal".

Text Alignment


You can align text as follows 
	
			.myAlignedText{
					text-align: right;
			}
This create a class "myAlignedText" which aligns text to the right.
Possible values are:
  • right
  • left
  • center
  • justified

Text Decoration


You can decorate text as follows 

	
			.myDecoratedText{
					 text-decoration: underline;
			}
This creates a class called "myDecoratedText" which creates underlined text. Possible values are:
  • underline
  • overline
  • line through
  • blink
  • none

Text Indent

You can indent the first line of text either by percentage or by pixels. For example; 

	
			p {
					 text-indent: 10px;
			}
This would indent the paragraph text by 10 pixels

Text Transform 


	
			.caps {
					 text-transform: capitalize;
			}
This would capitalize all of the text in the class called "caps".

Possible values are:
  • capitalize
  • lowercase
  • uppercase
  • none
These words have all been transformed to uppercase

White Space 


	
			p {
					 white-space: 10px ;
			}
This would fix the whitespace in the paragraph at 10 pixels.

Possible values are:
  • length
  • normal
  • nowrap

Word Spacing 


	
			.spaceWords {
					 word-spacing: 20px ;
			}
This would fix the word spacing in the "spaceWords" class at 20 pixels.
These words are spaced at 20 pixels

Possible values are:
  • length
  • normal
I hope you will join us for the next lesson Lesson 10) Fonts

Additional Resources