CSS Styling Text

Nine out of ten times the most important aspect of your website is the content, which is often text. You want to make sure that the text you display reads well and makes sense, but more than that, you want to make sure that the text is styled and looking good.

Using CSS text styling you can easily manipulate exactly how the text looks. Let’s begin by manipulating the text colour for the whole page (body).
body { color:red; }
Using this CSS all of the text on the page (unless otherwise stated) will be red. Of course this goes for other text elements too, such as h-tags (h1, h2, h3, …), p tags, divs, spans and most container elements.

Aligning the text is also possible. Let’s make sure the text is aligned to the left of the page:
body { text-align:left; }
You can even justify the text, making it all come to an even end: body { text-align:justify; }.
It’s important to remember that the text-align code only works to text INSIDE an element. A common mistake with new comers to CSS is to text-align:center; a layout element expecting it to go in the middle of the page, but this code will only center align the text within the element.

There are some basic decorations that can be applied to the text too, such as a line above the text, a line through the text, a line underneath the text, and blinking text/ Blinking text is not very well support so it is not recommended.
.class { text-decoration:overline; }
.class2 { text-decoration:line-through; }
.class3 { text-decoration:underline; }
.class4 { text-decoration:blink; }
Be careful when underlining text as it can often mis-lead users into thinking that the text is infact a link.

Text can be transformed to different case too. See the following examples:
.upper { text-transform: uppercase; }
.lower { text-transform:lowercase; }
.capitals { text-transform:capitalize; }
This code can come in very handy when changing the look of a website, if for example you want all of your menu items to become capitals.

The final section on CSS Text Styling is indentation. You can indent text as much as you like using specific measurements:
p { text-indent: 100px; }

If you’re looking for more information on how text can be changed to become bolded, italics, etc, then you need to look for CSS Styling Fonts as there are seperate behaviours for both FONTS and TEXT.