BLOGS BY TOPIC
BLOGS BY AUTHOR
BLOGS BY YEAR
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).
- CSS Styles for Specific HTML Tags
- Block Elements (Heading, Div and Paragraph Tags)
- Inline Tags - Span, Em and Strong (this blog)
- Styling Images - the IMG Tag
- Styles for Ordered and Unordered Lists - ul, ol and li
- Hyperlinks (the A Tag)
- Table Styles
- Setting CSS for Other Tags in HTML
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.
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:
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 */
font-size: 1.2 em;
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.