How to create styles for HTML tags using CSS
Part three of an eight-part series of blogs

This is the second of a three-part online training series of blogs on CSS style sheets.  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).

  1. CSS Styles for Specific HTML Tags
  2. Block Elements (Heading, Div and Paragraph Tags)
  3. Inline Tags - Span, Em and Strong (this blog)
  4. Styling Images - the IMG Tag
  5. Styles for Ordered and Unordered Lists  - ul, ol and li
  6. Hyperlinks (the A Tag)
  7. Table Styles
  8. Setting CSS for Other Tags in HTML

This blog is part of a larger online ASP.NET online tutorial series.  We also run classroom-based ASP.NET training courses.

Posted by Andy Brown on 16 May 2012

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:

Block of text containing span tags The corresponding HTML
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 use of bold and italics HTML for emphasis and bold
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:

Reformatted HTML

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.

This blog has 0 threads Add post