Text Formatting with CSS

Introduction

This article outlines some of the basics of text formatting with CSS. For now, we will deal with changing styles inline. Later on, we will discuss how to use CSS at a more global level.

Bare Minimum

Suppose you have a div of content, if you wanted to make all of the text within the div bold, you would use the following tag: <div style="font-weight:bold;"> Your Text Goes Here </div>. If I wanted to also underline the text, I would write: <div style="font-weight: bold; text-decoration: underline;"> Your Text Goes Here </div>. Notice that the semicolon (;) separates each of the attributes and that the colon (:) is used as an equals almost. Here is a list of some of the most basic attributes of text formatting. The vertical (|) is used as a divider for possible values of the attribute. Most of the values for the attributes are self-explanatory, and thus not all are fully explained.

• font-family: [any font family name] | serif | sans-serif | cursive | fantasy | monospace - You can put the name of any font family, such as "Comic Sans MS," or you can put a generic category, such as "serif," which applies to any font that has the little serifs on each character, like in Times New Roman and Garamond, as opposed to the clean cut look of Arial and Helvetica. If you identify a generic category, then the fonts will always be displayed correctly. However, if you specify a font that a computer does not have, it will appear as the default Times New Roman on that computer. To counter this, specify multiple back-up options. See below for an example of this.
  font-family: arial, helvetica, sans-serif;
  In this example, if a computer does not have Arial, it will display Helvetica. If both fonts are missing from a computer, any sans-serif font will be displayed.
• font-size: [any percentage] | [any number pt/px] | large | larger | small | x-small | xx-small | etc - Percentages are helpful because if a person specifies the text size to be large, the percentage will hold true and relative sizes will remain accurate. Absolute numbers do not allow the visitor to change the text size themselves, which may prove inconvenient for particularly large resolutions or visually-impaired people.
• font-style: normal | italic
• font-variant: normal | small-caps
• font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | ... | 900 - This is used to bold or unbold a section of text at a certain boldness.
• letter-spacing: normal | [any length px/em]
• text-align: center | justify | left | right - This is used to horizontally align text on a page.
• text-decoration: none | line-through | blink | overline | underline
• text-transform: none | capitalize | lowercase | uppercase
• word-spacing: normal | [any length px/em]

Borders

Borders can be defined very specifically in CSS, they draw a box around the text they are associated with. The most direct way to define a border is using the following syntax:

• border-color: red | blue | #000000 | [any hexadecimal number]
• border-width: [any pixel value]
• border-style: dashed | dotted | double | groove | hidden | inset | none | outset | ridge | solid - Not all of these values are supported by all browsers. Specifically, dashed, dotted, and hidden are not supported by most browsers.

There is also a short hand way of defining a border: <div style="border: red 2px solid;">Text Here</div>. All of the attributes above change every side of a border. However, you can also specify a particular border, as noted in the example following: <div style="border-bottom: red 2px solid; border-left: blue 3px dotted;">Text Here</div>. It is also possible to specify all the values of color for each specific side of a border box, explained in the xample following: <div style="border-color: red red blue blue;">Text Here</div>. The first value is attributed to the top value, the second to the right, the third to the bottom, and the last to the left.

Margins and Paddings

Margins and paddings allow for white space to surround text, giving it a more aesthetic appeal. Margins surround a div, while paddings are within a div. For example, if a div had a background color of pink, you could see the difference, as shown below.

Margins are defined just like borders are. Margin-left refers to the left border, margin-right to the right border, etc. And just in how borders are defined, there is a shorthand for margins as well, as shown in this example: <div style="padding: 10px 5px 10px 10px;">Text Here</a> . Again the sequence of padding values would be top, right, bottom, and left, respectively. Paddings are defined in the same way, except as padding-left, padding-right, and overall padding as the shorthand method.

Sources / For More Information

• O'REILLY CSS Reference
  Extensive reference for all attributes in CSS, including information about which browsers support certain attributes.
• Web Tutorials by Peter L. Kantor - CSS
  http://academ.hvcc.edu/~kantopet/css/index.php
  In-depth tutorials from notes on a series of classes on web site development taught at Hudson Valley Community College.