Styling Paragraphs and Headings with CSS
Posted The: 10/07/2008 At: 11:23
Last Edited: 30/04/2009 At: 3:45
Contents:
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 refered 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.
Headings
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.
Comments: [0]
