How to change font size in html?
Solution 1
Give them a class and add your style to the class.
<style>
p {
color: red;
}
.paragraph1 {
font-size: 18px;
}
.paragraph2 {
font-size: 13px;
}
</style>
<p class="paragraph1">Paragraph 1</p>
<p class="paragraph2">Paragraph 2</p>
Check this EXAMPLE
Solution 2
Or add styles inline:
<p style="font-size:18px">Paragraph 1</p>
<p style="font-size:16px">Paragraph 2</p>
Solution 3
If you're just interested in increasing the font size of just the first paragraph of any document, an effect used by online publications, then you can use the first-child pseudo-class to achieve the desired effect.
p:first-child
{
font-size: 115%; // Will set the font size to be 115% of the original font-size for the p element.
}
However, this will change the font size of every p element that is the first-child of any other element. If you're interested in setting the size of the first p element of the body element, then use the following:
body > p:first-child
{
font-size: 115%;
}
The above code will only work with the p element that is a child of the body element.
Solution 4
If you want to do this without adding classes...
p:first-child {
font-size: 16px;
}
p:last-child {
font-size: 12px;
}
or
p:nth-child(1) {
font-size: 16px;
}
p:nth-child(2) {
font-size: 12px;
}
Related videos on Youtube
Pancake_Senpai
Updated on July 09, 2022Comments
-
Pancake_Senpai almost 2 years
I am trying to make a website and I want to know how to change the size of text in a paragraph. I want paragraph 1 to be bigger than paragraph 2. It doesn't matter how much bigger, as long as it's bigger. How do I do this?
My code is below:
<html> <head> <style> p { color: red; } </style> </head> <body> <p>Paragraph 1</p> <p>Paragraph 2</p> </body> </html>
-
Ibrahim Rahimi over 4 yearsYou can use
rem
as scale for your font size for more flexibility and it's more dynamic.
-
-
Pancake_Senpai almost 11 yearsThanks. It works perfectly. Do you have any idea what the default font size is. I think it's around 16/17px...
-
Matt Bryant almost 11 yearsIt's browser specific. If you want a default for across browsers, you should set it yourself.
-
Matt Bryant almost 11 yearsInline styles are bad!
-
Ibrahim Rahimi over 4 yearsIf we combine and configure it with
rem
and userem
as scale for font size and other related size figures it would be more flexible and dynamic.