How do I add text into the div tag?

HTML-CSS
1

I am a beginner in HTML/CSS and I am having some trouble centering some text in my program. Right now, I have created a box and I have centered the header “Ingredients” inside of that box. I am trying to align the paragraph underneath that header to the left so that it’s not in the center, but I can’t figure out how to do that without messing up my page or the div tags. I have been looking for a solution to this for the past 30 minutes and I can’t seem to figure out what I am doing wrong or what I need to add. Can someone help?

Here is my code so far:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zombie Brain Brownies</title>
    
    <style>
    .container{
        width: 600px; height: 400px; border: 5px solid black;
    }

    .col{
        width: 250px;
    }
    </style>
</head>

<body>
    <center><h1><u>Zombie Brain Brownies</u></h1></center>
    <center><img src="../images/zombiebrainbrownies.jpg" width="399" height="300"></center>
    
    <center><div class="container">

        <div class="col">
            <h1><b><u>Ingredients</u></b></h1>
            <p>Hello there. Here is my first recipe for today.</p>
        </div>

    </div></center>

</body>


</html>
2

Hi, first thing you can do is “text-align: left|right|justify|center”, ex:

p {
    text-align:  left;   
    }

What this does it aligns the text to desired side within the “width” you’ve set.
If you need it to take the whole container - adjust your “.col:width”

.col {
        width: 250px;
    }
1 Like
3

(post deleted by author)

4

(post deleted by author)

5

Do you mean that I should put “p” inside of “col”?

.col{
        width: 250px;

      p{
        text-align: left;
      }
    }
6

You would do this way if you only wanted to target p tags that are children of the col classes. Otherwise all your text that’s held in p tags will be aligned left.

7

I’m having some trouble visualizing this as I am a beginner. Does this mean that I would have to do something like this? Would I leave “p” outside of “col”?

.col{
        width: 250px;
    }

   p{
     text-align: left;
   }
8

I think you want p to be inside col based on my understanding you want the text below the title to be left-aligned but not all text.

If you’re gonna make css changes to an element, it’s always best practice to be as specific as you can so that you reduce the chance of unintended side efects (other elements / style / interface changes that are unwanted). By being specifc about the p tags inside col classes, you protect your other p tags from change.

9

I tried putting p inside of col again, but I don’t know how to change <p>Hello there. Here is my first recipe for today.</p> so that it corresponds to the col class. Is there something that I have to add to that paragraph?

10 
<div class="col">
<p>text</p>
</div>

this is how I would put the tag if I wanted to make it a child of the col class

12

I’ve tried doing this:

<center><div class="container">

        <div class="col">
          <h1><b><u>Ingredients</u></b></h1>
        <p>Hello there. Here is my first recipe for today.</p>
        </div>

The paragraph still isn’t aligning to the left side of the box/container. I think what’s messing it up is that I have center tags around the initial div tags, but I used the center tags in order to center the container.

13

Google text-align property in CSS it should do the job.

14

I’ve already tried <p style="text-align: left;">Hello there. Here is my first recipe for today.</p> and the paragraph still isn’t aligning to the far left like I need it to be.

15

Well you’ve set your .col in css to width of 250 px so it naturally changes line when it reaches the width limit.

1 Like
16

Ohhh okay I see. I didn’t understand that there’s a connection between the width and my paragraph alignment. Your comment helped. Thank you! I wasn’t aware of that.

1 Like
17

aside from being a better practice, being specific about styling elements / passing properties is important for when you’re interested in transferring a property (width) from a parent to a child. I assumed you wanted to pass the width to the child element but as you can see, inheriting properties can be tricky and can require foresight / debugging when unintended results are rendered.

1 Like
18

Right, I’ll keep that in mind. Thank you!

1 Like
19

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