Text Formatting with CSS
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.
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:
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 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:
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:
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:
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
In-depth tutorials from notes on a series of classes on web site development taught at Hudson Valley Community College.