Working With Fonts and Text in CSS - Part 2

By: Daniel Imbellino
Updated: Feb 28, 2013

Setting Font and Text Properties in Your Webpages With CSS

Setting The Color of Text in CSS
You can set the color of your text in css using RGB values (Red, Green, and Blue), color names, or hex values as shown in these examples:

p {font-family: "times new roman"; color: blue; } You can specify a color name as a value, however, not all names work, but most simple colors do.

p {font-family: "times new roman"; color: rgb(10,0,190); } Using RGB values is by far the best choice. You can easily distinguish between many colors by mixing different quantities of of Red, Green, and Blue values. In our example we mixed 10 parts Red with 0 parts Green, and 190 parts Blue. Your RGB color values can range from 0 (no color) to 255 (fullest color).

p {font-family: "times new roman"; color: #ff0000; } Hex values are harder to work with and harder to remember. Its best to stick with RGB values when designing your web pages since they will work across all major browsers.

CSS Text Alignment:
Depending on what content you are presenting and what subject you are writing about, you may need a number of ways to format your text to match the appearance you are looking for. With CSS you can align your text left, right, center, and justify. If you specify the alignment of your text as justify, then all the text will be formatted evenly on both the left and right sides of the page, this ads for good presentation of text thats easier to read in some cases. If you align your text left, then the text wont necessarily align together vertically on both the left and right sides of the page.
Ex:
You set text alignment in CSS using the "text-align" property like this:
h2 {text-align: center; } h3 {text-align: justify; } h4 {text-align: left; }

CSS Text Decoration:
If you plan on employing the use of ordered or unordered lists in your web pages then you should be aware that, unordered lists by default are prefixed with a "bullet point", and ordered lists are typically numbered starting with one and moving up. This numbering and bullet points is what we refer to as "Text Decorations". In some cases you may not want to use text decorations in your code, and their are several options of how to apply them as shown here:

a {text-decoration: none; } This sets the "anchor tag" element to not show an underline or any other leading character.

ul {list-style-type: none; } This removes bullet points from an ordered or unordered list

ol {text-decoration: overline; } This sets a line over the content specified in an element

ul {text-decoration: line-through; } This sets a strike-through in the content specified in an element

ol {text-decoration: underline; } this underlines your content. Some web browsers underline links in your web pages by default. You could remove those underlines with the "text-decoration: none;" property as shown above.

CSS Text Transform:
You can use the CSS Text-Transform property to specify that all text is capitalized, lowercase, or the first letter of every word is capitalized as shown below:

h1 {font-size: 35px; font-family: arial; text-transform: uppercase; } This sets all text in an element to have uppercase letters only.

h2 {font-size: 30px; font-family: arial; text-transform: lowercase; } This sets all text in an element to have lower case letters only.

p {font-size: 25px; font-family: arial; text-transform: capitalize; } this sets the first letter of every word to use a capital letter only.

You can indent your text in CSS using the "text-indent" property as shown below:
p {text-indent: 20px; } This indents the first line of text in a paragraph by 20 pixels. HTML has a similar function for adding an indent. HTML uses the " " (non breaking space) "character entity reference" to add indentation to text and elements. If you'd like to learn more about character entity references, feel free to check them out thru our HTML reference mainpage.

CSS Line Height:
With the CSS line-height property you can specify the height of your text as compared to the text or objects above or below it. By default most browsers use to high of a default line-height value when displaying text. You can solve this problem by specifying the line height yourself as shown below:
p {font-size: 25px; font-family: arial; text-align: justify; line-height: 15px; } You can use the line-height property to move your elements and text closer or farther away from surounding content.

CSS Word Spacing:
With CSS you can specify the amount of space that exists between words in your text as shown below:
h1 {font-size: 50px; font-family: arial; tex-align: center; word-spacing: 20px; } Higher values will move your space between words farther apart. You can also use negative values, and your values can be presented in px, em, pt, cm, etc. One point (pt) is 1/72 of an inch.

CSS Letter Spacing:
Just as you can use the word-spacing property to define the space allocated between words, you can use the letter-spacing property to increase or decrease the amount of space between characters in your text as shown below:
p {font-size: 25px; font-family: arial; text-align: justify; letter-spacing: 8px; }