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

HTML-CSS
1

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

2

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
3

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.

4

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
5

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:

6

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

7

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
8

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

9

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