How to create styles for HTML tags using CSS
Part two 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) (this blog)
  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 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.

Block Elements (Heading, Div and Paragraph Tags)

A block element forms its own paragraph or block (as opposed to an inline element which flows with the surrounding text).  In the following example, the p and div tags are block elements, but the span tag is an inline element:

Sample block elements HTML for block elements
Block and inline elements The underlying HTML

Heading Tags (H1, H2, etc.)

You should set styles for heading tags typically using em as the font measurement unit.  For example:

/* level 1, 2 and 3 headings */



font-size: 1.5em;

font-weight: bold;

color: #CC0066;

margin-bottom: 20px;

text-decoration: underline;




font-size: 1.2em;

font-weight: bold;

color: #CC0066;

text-decoration: underline;




font-size: 1em;

font-weight: bold;

color: #CC0066;


Here only the first 3 heading tags are styled (you can set up to 6). All headings will appear in purple (colour code C06) and bold. In addition:

  • Level 1 headings will be 150% of the size of the default font, be underlined and have a 20 pixel gap after them;
  • Level 2 headings will be 120% of the size of the default font, and will be underlined
  • Level 3 headings will be the same size as the standard font.

Here’s what this will give:

Heading styles

The formatting created by the heading styles above.


DIV and P Tags

Use Div tags to set borders, widths or spacing around sections of text.  Here's an example:

Div tag example HTML for div tag
An example of a div tag The corresponding HTML

Here is the CSS for the divBox style to make this work:



width: 200px;

border: 1px solid #000;

background-color: #eff;

padding: 10px;

margin: 20px;

text-align: center;


This shows that any div tag which has the divBox class applied to it (such as the one above) will appear in a 200 pixel wide box, with a thin black border, pale blue background, inner 10 pixels padding and a 20 pixel margin around it. 

You can use p and div tags interchangeably, although CSS purists normally reserve p tags for quoted paragraphs of text.

This blog has 0 threads Add post