CSS
What is the correct css syntax for making all the p elements bold?
In this blog post, we will look into “What is the correct css syntax for making all the <p> elements bold?” on a webpage & get into various ascpects relating to it.
Contents
What is the correct css syntax for making all the <p> elements bold?
For making all the p elements to display as bold, we set the font-weight property of the p element to bold. By default all the p elements display in normal format.
We can use the inline style to make the p elements bold in a particular page. The style will be applied to all the p elements that exist on that particular web page.
All the text within the p element will appear as bold. The bold text looks thicker as compared to the normal text.
If there is any span tag within the p element then it will also appear in bold because the parent p element has been given the style of bold.
Practical example can be seen below :-
CSS :-
p {
font-weight: bold;
}
HTML :-
<p>This is paragraph number 1.</p>
<p>This is paragraph number 2.</p>
<p>This is paragraph number 3.</p>
<p>This is paragraph number 4.</p>
Result :-
Using classes to apply bold style to p elements
Classes can be used to apply styles to only particular elements. In the above sample, the style for p element was applied to all the p elements on the web page.
Not all the p elements on a web page will require a unique style so creating a separate style in internal or external css comes handy rather than applying inline style.
The same font-weight property is used in this case also. The property remains the same, we are just defining the style to be applied from a broader perspective.
We can also play around with other properties to make the p text more unique using the styles in the internal css.
Here’s the code for creating classes :-
CSS :-
p.bold {
font-weight: bold;
}
HTML :-
<p class="bold">This is paragraph number 1.</p>
<p>This is paragraph number 2.</p>
<p class="bold">This is paragraph number 3.</p>
<p>This is paragraph number 4.</p>
Result :-
