Connect with us

CSS

What is the correct css syntax for making all the p elements bold?

Correct css syntax p elements bold
Spread the love

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.

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 :-

Correct css syntax for making all the p elements bold

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 :-

Using classes to apply bold style to p elements


Spread the love