This is the second of a three-part online training series of blogs on CSS style sheets.&nbsp; This blog shows how to create styles for specific HTML tags (the first part covers the principles of CSS style sheets, and the third part gives a worked example of CSS).

You need a minimum screen resolution of about 700 pixels width to see our blogs. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.

Inline Tags - Span, Em and Strong

Within blocks of text, you can format particular words or phrases differently
using inline tags.

Span Tags

Use the span tag (usually with an associated class) to
format text within a paragraph. For example:

Paragraph containing formatting

The underlying HTML

Here's the spanPink style to make this work:

.spanPink

{

color: #CC00FF;

font-weight: bold;

}

The style for this class specifies that the font colour should be pink and
the text weight bold.

Emphasis and Strength – Em and Strong

Most formatting within a paragraph is done using span tags (see above), but if all that you want to do is to make text appear in italics or bold, use the
em or strong tags:

Example of inline tags

The corresponding HTML

Note that there’s nothing to stop you applying styles to these tags, to
change the way you emphasise text. For example:

/* change way emphasise text */

em

{

font-size: 1.2 em;

color: #800;

}

strong

{

text-decoration: underline;

}

These styles would subtly change the appearance of the HTML above:

The
em tag now makes the text red
and slightly larger, and the strong tag makes it underlined.

Note that you should avoid the old-fashioned u, i
and b tags to make text underlined, italic or bold,
even though these are - for now - supported by most browsers.