CODEWITHSUNDEEP
htmlcsstitle
jacksonpearce_
jacksonpearce_

Reputation: 11

How can i change my h2 title to <p> text while keeping size and alignment?

I want to change my <h2> text to <p>. But I want it to look the same as the <h2> text.

I've tried changing my CSS to no avail:

        <section id="" class="form container-fluid">
        <form id="frm_contact" action="" method="post" enctype=multipart/form-data" style="">
            <h2>Make an Enquiry</h2>
            <p>Make an Enquiry</p>                                                                          
            <p>Please ask us about any parts you need and we’ll get back to you shortly.</p>

The text just comes back obviously as standard p text, but I can't figure out where I'm supposed to change the code.

I want 'Make an Enquiry' (what is currently h2) to be <p>, but still look the same.

Have a look at what i mean here

Upvotes: 0

Views: 1945

Answers (3)

lothux1987
lothux1987

Reputation: 130

You can try the inline CSS to overwrite some changes.

<section id="" class="form container-fluid">
    <form id="frm_contact" action="" method="post" enctype=multipart/form-data" style="">
        <h2>Make an Enquiry</h2>
        <p style="font-size:30px;font-weight:bold;">Make an Enquiry</p>                                                                          
        <p>Please ask us about any parts you need and we’ll get back to you shortly.</p>

You can always change the styling if you wanted to by using this kind of approach.

Upvotes: 0

Christopher
Christopher

Reputation: 83

I suggest you change the tag to <p>, and use CSS styling to change the way it appears.

For example you could do:

<p class="headingText"> Make an Enquiry </p>

And in your CSS file:

.headingText {
       font-weight: bold;
       font-size: 14px;
     }

You can learn more about CSS here: https://www.w3schools.com/css/

If this doesn't answer your question please let me know how I can help you :)

ADD TO CSS FILE: 

.makeHeader {
  font-weight: bold;
  color:#000;
  text-transform: inherit;
  font-weight: 500;
    font-size: 32px;
}

Have tag like so: 

<p class="makeHeader">Make an Enquiry</p>

Upvotes: 1

Robin Baby
Robin Baby

Reputation: 357

Most browsers display <h2> with these default values Source :

h2 {
   display: block;
   font-size: 1.5em;
   margin-top: 0.83em;
   margin-bottom: 0.83em;
   margin-left: 0;
   margin-right: 0;
   font-weight: bold;
}

So, your best bet is to add a class to the <p> element with the above properties.

HTML

<p class="text-mod">Make an Enquiry</p>

CSS

 .text-mod{ 
          display: block;
          font-size: 1.5em;
          margin-top: 0.83em;
          margin-bottom: 0.83em;
          margin-left: 0;
          margin-right: 0;
          font-weight: bold; 
        }

EDIT: Okay, since the above solution didn't work, it must be because of specificity.

Try overriding the properties using !important:

 .text-mod{ display: block !important;
            font-size: 1.5em !important;
            margin: 0.83em 0 !important;
            font-weight: bold !important;
          }

Note: Using !important is an extreme measure and is only recommended when nothing else works out.

Upvotes: 2

Related Questions