CSS to <p> formatting


I am using this CSS:

body {
  font-family: Arial, Helvetica, sans-serif;

Then I using <p> and </p> tags to format text without using separate styles in CSS.

Is this good use of CSS or should I be using:


and then use <p class="style1"> etc.

Which tags are best?


You’re talking about slightly different behaviors.

The p element is used to separate distinct elements of text from one another, like a paragraph in a magazine or book. These items are given a default style based on the browser rendering the paragraphs. Usually they are very similar, but each browser has it’s own little quirks and anomolies to them.

IF the text is not being rendered in a way that is to your liking, then you use css to control how the browser displays the content.

If you want to style ALL paragraphs, you would use the p selector

If you want to style one specific paragraph, you can use the ID selector (#specific), though it’s usually not recommended because your code can get unwieldy, as you’re very likely to want to apply that style to multiple elements in the long run)

If you want to apply a certain style to certain paragraphs, you can use a class selector (.colorMe)

p { margin: 1em auto; }
#specific { color: green; }
.colorMe { color: red; }
<p id="specific">sgsgsljnsjlsfgjsfdlgjnsgfljnsfgljn. sgsgsljnsjlsfgjsfdlgjnsgfljnsfgljn</p>
<p class="colorMe">sgsgsljnsjlsfgjsfdlgjnsgfljnsfgljn</p>
<p>sgsgsljnsjlsfgjsfdlgjnsgfljnsfgljn. sgsgsljnsjlsfgjsfdlgjnsgfljnsfgljn</p>
<p class="colorMe">sgsgsljnsjlsfgjsfdlgjnsgfljnsfgljn</p>

You can also style based on the containers it’s in. The first in this example will target all p elements in the header container. The second will target all p elements that are in the element that has a class of target

header p { color: yellow; }
.target p { color: blue; }
<p>This should be yellow</p>
<p>This should be a normal color</p>
<div class="target">
<p>This should be blue</p>

If I understand you correctly then that is a similar approach to the one that I use. I look at the main text content on the website and then use that size and style on the body as the base to start with. That means that for most of the content you don’t need to style it again as the element will inherit the correct style from the body. It also avoids compounding issues as you can’t nest the body element again.

You only need to add classes when there are exceptions to that rule.

I find a the question bait confusing, so I hope am on target weigh this.

  1. Remember mark up your HTML SEMANTICALLY and not just to fit some styling goal.
  2. SOME CSS properties cascade, and some aesthetic styles repeat and embed. It would probably be most efficient to set the BODY at the most common size/font spacing ( most often this is the size of the main body text anyway) and then style the other tags to over ride those rules, after that you can add classes for differentiation or special circumstances.

hope that helps

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.