Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 815
user182 Avatar asked Aug 29 '13 21:08

user182


People also ask

Why might two fonts with the same point size appear to be different sizes?

That is, fonts at the same point size can have different x-heights and sometimes varying cap heights. This can be quite frustrating. Both the x-height as well as the cap height of a font affect its legibility, and will make different typefaces look larger or smaller at the same point size.

How do I set font size in P?

To change the font size in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property font-size. HTML5 do not support the <font> tag, so the CSS style is used to add font size.


4 Answers

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

Then style #losinfo and #secondText differently in css.

like image 151
Daniel Morgan Avatar answered Nov 15 '22 22:11

Daniel Morgan


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>
like image 31
Paolo Gibellini Avatar answered Nov 15 '22 22:11

Paolo Gibellini


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>
like image 39
Paramasivan Avatar answered Nov 15 '22 22:11

Paramasivan


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.

like image 36
James Avatar answered Nov 15 '22 21:11

James