CSS styling 2: Text

Text colour:
To change the colour of the text you do the same as you would do if you were changing the colour of the background. Therefor you would enter a code like this:
body {color:blue;}
Also like background you can choose what colour the text is by either using a colour name, a Hex value or an RGB value and by by changing the selector you choose which text changes colour.

Text alignment:
The text alignment property sets what position the text is horizontally. Text can be centred, aligned left or right or justified. Justified means that when you re size your browser or look at the text on a mobile device only the text will fit onto what ever your looking at. To arrange where your text is you should create a syntax like this and and replace the value with the appropriate value according to where you want your text:

h1 {text-align:center;}

 

Text decoration:

Text decoration is used to set and remove decoration from text. It's most commonly used to remove the underline from links for design purposes. The types of decoration are overline, line-through, underline and blink (which makes the text flash) but this property is only supported by Opera and Mozilla browsers. This is the syntax that you need to use all you need to do is possible change the selector and the value:

h1 {text-decoration:overline;}

 

Text transformation:

Text transformation is used to specify what letters are uppercase and lowercase. This property can be used to turn everything into a lowercase or uppercase letter or capitalise the first letter of each word.

The syntax should look like this:

p.lowercase {text-transform:lowercase;}

When entering the syntax it will be easier to name the class the same as the value so when you enter the class into a syntax in the body you easily remember what the right name is for that type of letter transformation.

 

Text indentation:

Text indentation tells the computer to start entering text so many pixels away from the edge. The syntax code that you'll need to do this is:

p {text-indent:50px;}

The more pixels you enter the further away the text will start.

 

Advanced text editing:

Letter-spacing:

Obviously this property is used for increasing and decreasing the spacing between the letters. The syntax goes like this:

h1 {letter-spacing:2px}

Obviously the more pixels you have for you value the bigger the space in between you letter. You can also go into minus numbers meaning that letter collide together.

 

Line-height:

This property controls the gap between each line through percentages: The syntax is this:

p.big {line-height:200%}

Just like the text transformation its easier to remember the class is called for a certain size if you just name them big and small. The distance between each line increases and decreases with higher and lower percentages.

 

Vertical-align:

Refure back to horizontal-align replacing the word horizontal with vertical.

 

Word-spacing:

Refure back to Letter-spacing replacing letter for word.