How to Style p Inside div Using CSS

In web development, HTML provides the structure of a webpage, while CSS is used to style and format that structure. One of the most common styling needs is to target specific elements inside containers — for example, styling all <p> (paragraph) tags that appear inside a <div>.

In this blog, we’ll look at how to use CSS to style <p> elements that are inside a <div>, why this is useful, and some practical examples.

Table of Contents

✅ CSS Selector for `<p>` Inside `<div>`

To target <p> elements that are inside a <div>, use this simple CSS rule:

div p {
  /* styles go here */
}

What it does:

This selector applies styles to every <p> element that is nested anywhere inside a <div> — whether directly or indirectly.

🔹 Example:

HTML:

<div>
  <p>This is a paragraph inside a div.</p>
  <section>
    <p>This paragraph is nested deeper inside the div.</p>
  </section>
</div>

<p>This paragraph is outside the div.</p>

CSS:

div p {
  color: blue;
  font-weight: bold;
}

Result:

Only the <p> elements inside the <div> will have blue, bold text.
The last <p> (outside the div) remains unaffected.

🎯 Direct Child vs. Any Descendant

If you want to style only the direct <p> children of a <div>, use the child combinator (>):

div > p {
  color: green;
}

This will style only those <p> elements that are immediate children of the <div>, and not paragraphs nested deeper within other elements like <section> or <article>.

💡 Why This Is Useful

Helps you target only specific paragraphs without adding extra classes.
Keeps your styles clean and readable.
Useful for component-specific styling, such as paragraphs in cards, sections, footers, etc.

🔧 More Styling Ideas for `div p`

div p {
  line-height: 1.6;
  margin-bottom: 1em;
  font-size: 1rem;
  color: #333;
}

Use these properties to control:

Text spacing (line-height)
Separation between paragraphs (margin-bottom)
Readability and visual tone (font-size, color)

Conclusion

Styling <p> elements inside <div> containers is easy and powerful using basic CSS selectors. The div p selector lets you target all paragraph tags nested within any div, while div > p narrows it down to direct children only.

Understanding and using these selectors will help you write cleaner, more efficient, and more maintainable CSS for any website or project.

✅ CSS Selector for <p> Inside <div>