CSS - How to style class within a class or id?

I have code similar to this:

html:

<div class="body" >
<section id="about">
 <h2>About 1</h2>
   <p class="about"> Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit, sed do eiusmod tempor incididunt </p>
 <h3>About 2</h3>
  <p class="about"> Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit, sed do eiusmod tempor incididunt </p>
 </section>
</div>

css:

.body {
  padding-top: 70px;
  margin-left: 30px;
  margin-right: 30px;
  text-align: center;
}

#about {
  font-family: monospace;
}

I tried to target the paragraph <p> part with the following but did not work. Of course I removed #about first and applied p .about

p .about {
  font-family: monospace;
}

How can I style those two paragraphs? Should I remove classes and apply ids or something else? I want to style <p> in other font then <h> and later to play with flexbox and css grid

Hello,

A small change is needed - currently p .about says the browser that you are looking for an element inside the <p> tag which has that particular class. Make it p.about (no space!) and you will target the <p> elements with that class assigned.

1 Like

That worked!
Thank you!
I have another quick question: What should I use to get text in “box” without using <br>? Margin and padding properties? My text is now stretched across the screen within .body borders.

There is no width of the box, so for now the whole screen is your box that you modify. Apply something like width: 300px; and this will be your first box to contain the text in.

1 Like

That is great, I didn’t even think about that. That property moved my text to the left side of the screen, so I have another question :roll_eyes: , how to have it centred? text-align: centre; didn’t affect it.
Sorry to bother, I’m just to new for this :grimacing:

maybe I just leave it like that and let readers stretch their necks if they have a big screen :sweat_smile:

A quick recipe for a centered box with text:

.body {
  width: 768px;
  padding: 5px;
  margin: 0 auto;
  text-align: center;
  background-color: #ff7200;
}

To quickly explain what it does:

  • Width, this sets the available space for your text
  • Padding pushes your text inside the box so it doesn’t stick directly to the edges
  • Margin, the given parameters center the box on the screen
  • Centering the text, well, it centers the text inside the box
  • Background color will help you to see the boundaries of the box
1 Like

Now that did the magic that I was looking for!
Thank you very much!