By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Styling Paragraphs and Headings with CSS

Tutorial showing how to style HTML p tags, also known as Paragraphs.

Edited: 2011-10-09 04:42

This tutorial covers how to use CSS Selectors to style headings and paragraphs.

Margin/extra lines

Some beginners are having trouble with default margins, which appears below paragraphs, this is often referred to as linebreaks. You can remove the "extra lines" created by these elements, through the use of the CSS margin properties.

p { margin: 0; }

Text Color

You can easily change the color of all text by applying a color to the body, if you only want the color applied to text inclosed in paragraph tags, then use below.

p { color: yellow; }

You can also use a rule which only effects single paragraphs, this is usually done by the use of classes, which are selected by the class selectors.


The below Example is setting the text size of the heading elements, and removes the default margin.

h1 {font-size: 1.6em;margin:0;}
h2 {font-size: 1.5em;margin:0;}
h3 {font-size: 1.4em;margin:0;}
h4 {font-size: 1.3em;margin:0;}
h5 {font-size: 1.2em;margin:0;}
h6 {font-size: 1.1em;margin:0;}

Note. Its recommended that you read the reference entry on CSS Selectors as well.