CODEWITHSUNDEEP
htmlcssweb
Xinyun Zhou
Xinyun Zhou

Reputation: 93

How would I add a second line to a <div> and make it have a different font size?

I'm currently working on a simple COVID-19 site where some info gathered from some flask code is shown in s, with some CSS making the backgrounds into white boxes. However, I am not completely sure how I can add a "cases" right underneath the number while still being in the box. I'm sorry if my question is slightly unclear. I will show my code below.

HTML I am attempting to use:

<div class="boxed">{{data}}</div>
<div><p>cases</p></div>

CSS I am attempting to use:

.boxed {
  font-size: 800%;
  width: 700px;
  text-align: center;
  padding: 80px;

  background: whitesmoke;
  font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
  font-weight: bold;

  color: rgb(49,74,128);

  margin: 2% auto;

  border-radius: 60px;
}

Right now, the "cases" text shows under the box with the number in it, instead of being inside of it.

I apologize if it is kind of a bad or simple question- I am a beginner in making websites. Any help would be greatly appreciated!

Upvotes: 0

Views: 72

Answers (2)

Pushkin
Pushkin

Reputation: 3604

Just move the p tag inside div.boxed and add separate CSS for title and cases

.boxed {
  font-size: 800%;
  width: 700px;
  text-align: center;
  padding: 80px;

  background: whitesmoke;

  color: rgb(49,74,128);

  margin: 2% auto;

  border-radius: 60px;
}

.title {
    font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
    font-weight: bold;
}

.body {
   /* your body styling */
}
<div class="boxed">
  <div class="title">{{data}}</div>
  <p class="body">cases</p>
</div>

Upvotes: 2

Mhel
Mhel

Reputation: 50

You can move <p>cases</p> inside your .boxed div.

<div class="boxed">
{{data}}
<p>cases</p>
</div>

Then add the styling below to your css.

.boxed p {
  font-size: 32px;
}

Testing: https://jsfiddle.net/z3acqfjg/1/

Upvotes: 0

Related Questions