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:
p {
color: red;
}<p>Paragraph 1</p>
<p>Paragraph 2</p>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
Or add styles inline:
<p style="font-size:18px">Paragraph 1</p>
<p style="font-size:16px">Paragraph 2</p>
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.
rem and use rem as scale for font size and other related size figures it would be more flexible and dynamic.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;
}
You can't do it in HTML. You can in CSS. Create a new CSS file and write:
p {
font-size: (some number);
}
If that doesn't work make sure you don't have any "pre" tags, which make your code a bit smaller.
You can do this by setting a style in your paragraph tag. For example if you wanted to change the font size to 28px.
<p style="font-size: 28px;"> Hello, World! </p>
You can also set the color by setting:
<p style="color: blue;"> Hello, World! </p>
However, if you want to preview font sizes and colors (which I recommend doing) before you add them to your website and use them. I recommend testing them out beforehand so you pick a good font size and color that contrasts well with the background. I recommend using this site if you wish to do so, couldn't find anything else: http://fontpreview.herokuapp.com/
remas scale for your font size for more flexibility and it's more dynamic.