CSS Font Basics – CSS Text – How to Make Text Look the Way You Want Using CSS


Why CSS?

The old way of changing the way your text looks in HTML has been outdated. The new way to do it is by using style sheets. Learning CSS (Cascading Style Sheets) is really worth the effort. One main reason is for consistency – you do not have to remember every single detail of how each font is set up. There is also a factor of readability when you are looking at the raw code. It also saves a lot of work. Instead of having to type all the font attributes each time you need to change the formatting, all you have is a simple "span" or "p" tag. And all that is needed to change the look of your fonts site-wide is simply change the attributes in the Cascading Style Sheet

Basic CSS text style definitions:

The style definition starts with a dot (.) Then a name for the style. Make it descriptive and easy to remember. (Built-in tags such as H1 tags, etc. do not start out with a dot.)
The definition is surrounded by curly braces {and} and the individual attributes are separated by a semicolon (;)

To set the font family, size and weight:

.smalltext { "Times New Roman", Times, serif;
font-size: 10px;
font-weight: normal;

You can change the color and make it bold:

.redtext { "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
color: # FF0000;

You can make it a san-serif font and increase the spacing between the lines:

.spacedtext {
font-size: 12px;
font-weight: bold;
line-height: 150%;
color: # 000000;

You can make it look like it was typewritten:

.couriertext { "Courier New", Courier, monospace;
font-size: 14px;
font-style: normal;
line-height: 100%;
font-weight: normal;

To make it italic and underlined:

.underlineditalic {
font-size: 12px;
text-decoration: underline;
text-decoration: italic;
color: # 000000;

To make a line through the text use :

text-decoration: linethrough;

You can center the text, left or right-justify:

text-align: left
text-align: right
text-align: center
text-align: justify

To apply the styles to your text, you can start the paragraph off with the "p" tag (p class = "normaltext") for example, interrupt the format in mid-sentence if you wish with the "span" tag (span class = "redtext") then resume the regular font by simply closing the span tag. Note: The tags above are surrounded by the greater than sign () but there is no way to display them properly in this article.

Hint If you wish to make a habit of changing font attributes in-line, you'll want to be sure to keep your font sizes, line height, etc. consistent.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.