Things That Have Changed -- Formatting Text For Appearance

Part III -- HTML Level 4 -- In-Line Style Information

The previous page contained CSS examples which work on the assumption that the information defining the styles which were used is located either in a <STYLE> section of the document in which the styles are used, or located in a separate file designated with a .CSS file extension and referenced using a <LINK> tag located in the Head section of the document in which the styles are used. Styles which are defined in a separate file and referenced with a <LINK> tag can be applied to an entire web site consisting of as many separate pages as you like, and changes to the style of the entire site can be made by making changes to the .CSS file. If the style information is located in a <STYLE> section, then the styles can only apply to the document which contains that section, however, changes to the style for the entire document can be made by modifying the information contained within the <STYLE> section for that document.

There is another way to style content in a HTML document, and that is to use Inline Styles, in which the style information is actually included as a STYLE attribute in whichever tag is being used to mark up the content. For example, a <P> tag might contain a STYLE attribute which would change the style for just the paragraph marked up by that tag. Styling text in this way only affects content which is marked up by the tag containing the STYLE attribute. Here is an example of the use of inline styles using a <P> tag:

This is text which is formatted with a half-inch margin on both sides, and is set in 14 point, Roman, red type.

<P STYLE="margin-left: .5in; margin-right: .5in; font-family: times, palatino, serif; font-size 14pt; color: #FF0000">This is text which is formatted with a half-inch margin on both sides, and is set in 14 point, Roman, red type.</P>

Note that the value of the STYLE attribute is all of the style information, properties and descriptors, and all of the style information is contained within one set of quotation marks ("margin-left: .5in; margin-right: .5in; font-family: times, palatino, serif; font-size 14pt; color: #FF0000"). The order of style properties is significant: The font weight, style and alignment must be specified before the others. There may also be other quirks (depending on which browser you're using) which can be fixed by changing the order in which the style attributes are listed.

The following is a list of some of the more commonly used style properties and (more or less) commonly supported descriptor values for those properties. All of the following property/descriptor pairs can be used in any application of CSS, regardless of whether the use is inline or referenced from a separate file.

COMMON PROPERTY/DESCRIPTOR PAIRS FOR TEXT FORMATTING

Property

Description

Descriptors

Declaration

font-size

Sets size of text

points (pt)
inches (in)
centimetres (cm)
pixels (px)

{font-size: 14pt}
font-family

Sets typeface. Comma separated names are applied in order depending on availability on the user's system.

typeface name
font family name

{font-family: times, palatino, serif}
font-weight

Sets thickness of type. Accepted values depends on the fonts available on the user's system.

extra-light
light
demi-light
medium
demi-bold
bold
extra-bold

{font-weight: bold}
font-style

Sets style of text. The W3C specification references several styles which are not supported by all browsers. Currently the only universally supported value is 'italic'.

normal
italic

{font-style: italic}
line-height

Sets the distance between baselines. Typesetters will recognize this attribute as "leading".

points (pt)
inches (in)
centimetres (cm)
pixels (px)
percentage (%)

{line-height: 18pt}
color

Sets the color of text

color-name
RGB hex-triplet

{color: #008000}
text-decoration

Produces text with lines. The W3C specification references several decorations which are not supported by all browsers. Currently the only universally supported value is 'underline' although 'line-through' works on some systems.

none
underline
overline
line-through

{text-decoration: underline}
margin-left

Sets the distance from the left edge of the browser window (or border, if appearing in a table cell).

points (pt)
inches (in)
centimetres (cm)
pixels (px)

{margin-left: .25in}
margin-right

Sets the distance from the right edge of the browser window (or border, if appearing in a table cell).

points (pt)
inches (in)
centimetres (cm)
pixels (px)

{margin-right: .25in}
margin-top

Sets the distance from the top edge of the browser window (or border, if appearing in a table cell).

points (pt)
inches (in)
centimetres (cm)
pixels (px)

{margin-top: .25in}
text-align

Sets justification. This attribute must precede all others or it won't work correctly.

left
center
right

{text-align: right}
text-indent

Sets first line distance from left margin.

points (pt)
inches (in)
centimetres (cm)
pixels (px)

{text-indent: .25in}
background

Sets background images or colors.

URL
color-name
RGB hex-triplet

{background: #000000}

Grouping Style Properties

The properties listed above are ones that you will probably use frequently in your style sheets, so the W3C specifies a shortcut notation. Instead of setting the attributes separately, you can combine them into one property called font.

Thus, instead of

P     {font-family: times, serif;
      font-size: 12pt;
      line-height: 20pt;
      font-weight: bold;
      font-style: italic}

you can simply use

P {font: bold italic 12pt/20pt times, serif}

The same can be done with margin descriptors, so instead of

P     {margin-left: -10px;
      margin-right: -10px;
      margin-top: 20px}

you can use

P {margin: 20px -10px -10px}

You should also notice that negative values can be set for margin properties. This is useful if you wish to use overlapping to create text effects. It is possible to define several styles which overlap each other, creating a shadow or offset effect with text, which will load in a browser much more quickly than a graphic which contained similarly styled text.

A complete guide to the use of level 4 cascading style sheets (CSS2) can be found here. Good luck!