Formatting Text with CSS

Setting Up the HTML Code

The HTML code for this css tutorial contains three paragraphs of text as shown below. The contents of these paragraphs are wrapped inside elements. The first paragraph has been set to a larger font size. It has also been colored red and style bold and italic.

Example of Text Style with CSS



Here is another paragraph using inline css

Here is third paragraph using inline css

inline css can be fun…

Example:

Example of Text Style with CSS

Here is another paragraph using inline css
Here is third paragraph using inline css
inline css can be fun…

Removing Font Elements

Instead of using elements throughout a document, you should uss css to syle the content. This reduces the overall file size and makes future maintenance easier. All font-style information can be stored in one external file, rather than scattered throughout every document in a website.

The elements will be removed from the HTML markup. The first pragraph will be styled with an introduction class because it will need additional styling.

Example of Text Style with CSS
Here is another paragraph using inline css
Here is third paragraph using inline css
inline css can be fun…

Creating the CSS Selectors

To style the paragraphs, two selectors will be used.
p {…}
p.introduction {…}

Styling the element with CSS

The font family is set using the font-family property. A range of fonts should always be included, separated by commas. A generic font family must be included at the end of the list. If a use does not have the initial font family, his or her browser will look for the second font family. If no font matches are found, the browser will fall back to the generic font family.

Generic Font families – are a fallback mechanism to provide some basic font styling if none
of the specified font families are available. The five generic font families are serif, sans-serif,
cursive, fantasy, and monospace.

The font-size property will be set to 80%, which will make it 80% of the user’s default browser style. Using percentages will allow the user to control the overall size of the fonts.

Ems and Percents – In theory, there is no difference between using ems or percents for font sizing. Percents will allow the fonts to scale correctly when zooming in or out.

Finally, a line-height of 140% will be included to provide space between each line and make the text more readable. The default line-height for most browsers is 120%. Setting a value% will add 20% space between each line. The rule set is shown below.

p {

font-family: arial, helvetica, sans-serif;

font-size: 80%;

line-height: 140%

}

Example of Text Style with CSS. To see the changes we need a
few lines of sample text. Im not a fan of latin so I
will just ramble about css for a few lines

Here is another paragraph using inline css o see the
changes we need a few lines of sample text. Im not a fan
of latin so I will just ramble about css for a few lines

Here is third paragraph using inline css
inline css can be fun…

Styling the First Paragraph

The first paragraph in this css tutorial different fonts than the other paragraphs. In this case, it will be styled with times, “times new roman”, serif. Fonts such as Times New Roman, which have spaces in there names, should always be wrapped in quotation marks.

The nest step is to style the text italic and bold. This is achieved using font-style: italic; and font-weight: bold;

To align the test in the center of the screen, use text-align: center.

The font size can be increased using font-size: 110%; and the font color can be set using color: #900;

p {

font-family: arial, helvetica, sans-serif;

font-size: 80%;

line-height: 140%

}

p.introduction {

font-family: times, “times new roman”, serif;

font-style: italic;

font-weight: bold;

text-align: center;

font-size: 110%

color: #900;

}

Example of Text Style with CSS. To see the changes we need a
few lines of sample text. Im not a fan of latin so I
will just ramble about css for a few lines

Here is another paragraph using inline css o see the
changes we need a few lines of sample text. Im not a fan
of latin so I will just ramble about css for a few lines

Here is third paragraph using inline css
inline css can be fun…

Converting to Shorthand

Shorthand properties are easier to write and maintain than longhand properties. They also make css files more concise.

The element can be styled so that font-size, line-height, and font-family are declared as a single font property.

The introduction class can be styled so that font-style, font-weight, font-size, line-height, and font-family are declared as a single font property.

p {

font: 80%/1.4 arial, helvetica, sans-serif;

}

p.intoduction {

font: bold italic 110%/1.4 times, “times new roman”, serif;

text-align: center;

color: #900;

}

Summary

In this css tutorial, you learned how to style text using font-family, font-size, line-height, font-style, font-weight, text-align, and color. You also learned how to use the shorthand property.

Tags: color, CSS, css tutorial, font-family, font-size, font-style, font-weight, How To, line-height, text-align, tutorial, Tutorials

This entry was posted on Thursday, April 1st, 2010 at 8:18 pm and is filed under CSS Formatting Text. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Css, How to