How to create styles for HTML tags using CSS
Part eight 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
  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)

This blog is part of a larger online ASP.NET online tutorial series. Wise Owl's main business is running classroom-based training courses - have a look at our other .NET 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.

Setting CSS for Other Tags in HTML

In addition to the tags listed in the rest of this chapter, there are a couple of other peculiar tags worth mentioning here. 

The Line Break BR Tag

You should avoid the line break tag except when writing poetry! 

HTML for a poem How poem looks on screen
The HTML for the poem How it would render

In the example above the line break tags ensure that this entire block of text is treated as a single paragraph.

You could apply a style to a BR tag - for example, to increase spacing between lines - but it would be an unusual thing to do.

The Horizontal Row HR Tag

A simple horizontal line can look a bit dull:

HTML for a line The horizontal line on the screen
The HTML for our line What the line looks like

However, as with all other tags you can style hr tags to look more exciting:

Solid red HR line

You could make this line look a bit more exciting by applying the CSS style shown below.


Here is the CSS to achieve this:

/* horizontal rows */



border: 1px solid #F00;


Any background colour you set for the style of an HR tag will be ignored, since HTML horizontal rows consist purely of a line. It�s better practice to avoid HR tags altogether, and use bottom and top borders of div tags instead to achieve the same effects.

And on that slightly anti-climactic note, we've reached the end of the tutorial on applying CSS to specific HTML tags!

This blog has 0 threads Add post