How to Create a Run-In Heading With CSS

If you want to create an appearance where the heading at the beginning of a paragraph appears to run into the paragraph--it is possible with CSS.

Difficulty:

Moderately Easy

Instructions

Things You'll Need

• A text editor or HTML editor
• A web page

1. The second heading is run-in.

   Observe the difference between a normal block level heading and a run-in heading.

2. Create the CSS class that you will use to make both the heading and the paragraph display on the same line. Normally, headings and paragraphs are block level elements and display on their own lines.

   Use the property display: inline in your class rule. Call the class something logical like .runin. Here's how the rule would look in the CSS.
   .runin {
   display: inline;
   }

3. Apply the class to both the heading and the paragraph.

   Apply the class to both the heading and the paragraph elements. See the image for the HTML.

4. Because the CSS rule is a class, you can apply it to a series of headings and paragraphs.

5. You can make additional rules for the class "runin" that will affect the appearance of color, font, padding and other CSS properties.

Tips & Warnings

• There is a CSS display property, display: run-in, but not all browsers support it yet.