How to set two different font sizes in the same <p>

StackOverflow https://stackoverflow.com/questions/18521152

  •  26-06-2022
  •  | 
  •  

Question

I have a piece of HTML code that i'm stuck with. How can I set the first part of this text to a font-size of 20px and the text after the <br> tag to a font-size of 15px?

Or if I'm doing it completely wrong, how would I do it without having them in different tags 

<p id="losinfo"> Los Santos: a sprawling sun-soaked metropolis full of 
self-help gurus, starlets and fading celebrities, once the envy of the 
Western world, now struggling to stay afloat in an era of economic 
uncertainty and cheap reality TV <br><br> Our largest open world yet
 - by far - and spanning vastly diverse cultural and geographical areas, 
the entire world of Grand Theft Auto V is open from the very beginning 
of the game to explore. Visitors to the greater metropolis of Los Santos 
and the countryside of Blaine County will encounter faded celebrities, 
meth heads, party people, violent gangs, hikers, bikers and every other 
manner of colorful denizen. You'll be able to traverse everywhere from 
the tops of the mountains, through the streets of Los Santos and to the 
depths of the ocean floor</p>
Was it helpful?

Solution 

<p id="losinfo">Los Santos: <span id="secondText"> a sprawling sun-soaked ...</span></p>

Then style #losinfo and #secondText differently in css.

OTHER TIPS

Your question is a bit unclear.
Are you meaning something like this?

<p id="losinfo">
<span style="font-size:20px;">Los Santos</span>
<span style="font-size:15px;">: a sprawling sun-soaked metropolis [...]</span>
</p>

Try

CSS

p#losinfo {
font-size:20px;
}
p#losinfo span {
font-size:15px;
}

Html

<p id="losinfo"> Los Santos: a sprawling sun-soaked metropolis full of self-help gurus, starlets and fading celebrities, once the envy of the Western world, now struggling to stay afloat in an era of economic uncertainty and cheap reality TV <br><br> 
<span>Our largest open world yet - by far - and spanning vastly diverse cultural and geographical areas, the entire world of Grand Theft Auto V is open from the very beginning of the game to explore. Visitors to the greater metropolis of Los Santos and the countryside of Blaine County will encounter faded celebrities, meth heads, party people, violent gangs, hikers, bikers and every other manner of colorful denizen. You'll be able to traverse everywhere from the tops of the mountains, through the streets of Los Santos and to the depths of the ocean floor</span></p>

Use a div around the part you want 20px and another div around the part you want 15px is what I would do. Then set those divs with classes and set the font-size in css.

I came across this question because I was trying to figure out how to change font in the same line of text. Lo and behold, span also works for this. Here's without the ids, for simplification:

To change font size

<p>regular text <span style="font-size: 30pt;">new size text</span></p>

To change font

<p>old font <span style="font-family: courier;">new font</span></p>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top