Multiple styles within same paragraph

Question

I'm trying to figure out if there's a way to style a paragraph in multiple ways such that the formatting is responsive and the text of different styles remains on the same line. I am a beginner, and have searched for other answers but can't figure it out, so please forgive me if the answer is quite obvious.

For example: I HATE hot dogs!

"I" would need to be 16px, "HATE" would need to be 40px, and "hot dogs!" would need to be 16px again, but I want all of the text within the same <p> if possible, or if not possible, at least to LOOK as if they're all in the same <p>. (The actual text I'm using is rather a long paragraph that needs to respond to different browser widths, so it's important for the text to be able to act as if it's one paragraph.)

I've jerry-rigged an extremely messy and only semi-successful solution using divs but I feel sure there should be a more elegant answer:

.container1 {
  position: absolute;
  font-size: 16px;
}

.container2 {
  position: relative;
  float: left;
  padding-top: 22px;
}

.container3 {
  position: relative;
  float: right;
  font-size: 40px;
  padding-left: 4px;
}

.container4 {
  position: relative;
  float: right;
  padding-left: 4px;
  font-size: 16px;
  padding-top: 22px;
}

<div class="container1">
  <div class="container2">I</div>
  <div class="container3">HATE
    <div class="container4">hot dogs!</div>
  </div>
</div>

Answer 1

As some people already said, you don't use <div> for this type of situation, instead, you need <span></span> which will allow different styles inside the same <p>. You can use CSS to define specific text styles:

CSS Classes defining font size

.textA {
  font-size: 16px;
}

.textB {
  font-size: 40px;
}

<p>
  <span class="textA">I</span>
  <span class="textB">HATE</span>
  <span class="textA">hot dogs!</span>
</p>

Inline Style This approach may seem shorter but it won't be as nice when styling a whole paragraph.

Edit (note by @tacoshy): should also never been used outside of email-templates. This will cause major specificty weight issues, cause low readbility and cant be cached which causes longer loading times.

<p>
  <span style="font-size: 16px;">I</span>
  <span style="font-size: 40px;">HATE</span>
  <span style="font-size: 16px;">hot dogs!</span>
</p>

Remember you can also set other styles as font color, italic, bold, background color, etc.

Answer 2

In this case, you would not use <div>. You would use the <span> element. It's meant for applying different styles to the same paragraph. Here the example from the one you gave in the question:

p {
  font-size: 16px;
}

.i {
  padding-top: 22px;
}

.hate {
  font-size: 40px;
  padding-left: 4px;
}

.hd {
  padding-left: 4px;
  font-size: 16px;
  padding-top: 22px;
}

<p>
  <span class='i'>I</span>
  <span class="hate">HATE</span>
  <span class="hd">hot dogs!</span>
</p>

Answer 3

One thing no one has noted is that you can (and should, IMO) use native, semantic HTML elements where possible, falling back to generic HTML elements where those fail.

There's no need for more than two elements; the containing paragraph, and the emphasized HATE word. Note I've defined the 16px font at the root level (html) and defined the 40px in relative terms to that (2.5rem). That way if a user changed their font sizes, the HATE would still be relatively large.

html { font-size: 16px; }
em { font-size: 2.5rem; font-style: normal; }

<p>I <em>HATE</em> hot dogs!</p>

Answer 4

You should use inline-elements such as a <span>. You can either add classes to them or just use the :nth-child selector instead. Using float here is completely wrong. Also no reason for position: absolut or relative

p :nth-child(1) {
  padding-top: 22px;
}

p :nth-child(2) {
  font-size: 40px;
}

p :nth-child(3) {
  font-size: 16px;
}

<p>
  <span>I</span>
  <span>HATE</span>
  <span>hot dogs!</span>
</p>

Answer 5

You could use span. So...

HTML

<div class="container1">
   <p>I
      <span class="text-effect-1">HATE</span>
      <span class="text-effect-2">HOT DOGS</span>
   </p>
</div>

CSS

.container1 p{
  font-size: ---;
  font-weight: ---;
  color: ---;
}

.text-effect-1{
  font-size: ---;
  font-weight: ---;
  color: ----;
}

.text-effect-2{
  font-size: ---;
  font-weight: ---;
  color: ----;
}