CODEWITHSUNDEEP
htmlcss
Robbie Nichols
Robbie Nichols

Reputation: 45

How do I target specific P inside this Div, for CSS

I'm trying to target a p inside of the following code. I want to write a class to add text-shadow to the text of that p.

I just don't know which class to target, and what the proper syntax is. I thought it was .mainbg p { xxxxxx } but that didn't work.

<section aria-label="home" class="mainbg" id="home">
  <!-- intro -->
  <div class="container">
    <div class="row">
      <div class="overlay-main v-align">
        <div class="col-md-10 col-xs-11">
          <h1 class="onStep" data-animation="animbouncefall" data-time="300">LOUIS WALLACE CONSTRUCTION</h1>
          <div
            class="onStep"
            data-animation="fadeInUp"
            data-time="600"
            id="slidertext"
            style=" text-shadow: 2px 1px 4px black;"
          >
            <h3 class="main-text">Oroville General Contractor</h3>
            <h3 class="main-text">Over A Decade Of Experience</h3>
            <h3 class="main-text">All Phases Of Construction</h3>
          </div>
          <p
            class="onStep"
            data-animation="animbouncefall"
            data-time="900"
            style="font-weight:500"
            style="text-shadow:20px 20px 20px black;"
          >
            No matter how large or small the project, we ensure that your project is completed with precision and
            professionalism. We take pride in our quality craftsmanship, our attention to detail, and our open line of
            communication with each and every customer. With each project, we understand that our role is about more
            than simply putting up walls — it’s about ensuring that your vision is turned into a reality.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

Upvotes: 1

Views: 3521

Answers (3)

user10957435
user10957435

Reputation:

The best way to target a specific

tag is to give it an id

<p id="myPTag"></p>

Themn, you can reference it from css like this:

#myPTag {

    // Code here...
}

If you are interested in all p tags, you can do that from CSS like this:

div p {
    // Code here...
}

Or you can do something like this:

#home p {
    // Code here...
}

P.S. as Caiovisk pointed out .mainbug p { should also work too.

Upvotes: 0

caiovisk
caiovisk

Reputation: 3819

Fisrt of all, you have two inline css style on you p tag, so only the first will take effect:

<p class="onStep" ... style="font-weight:500" style="text-shadow:20px 20px 20px black;">...</p>

it should be:

<p class="onStep" ... style="font-weight:500; text-shadow:20px 20px 20px black;">...</p>

The .mainbg p selector should work fine, just keep in mind that if you have inline css it will override you .mainbg p selector.

Try to do not use inline css in that case.

.mainbg p {
  font-weight:500;
  text-shadow:20px 20px 20px black;
}
<section aria-label="home" class="mainbg" id="home">

    <!-- intro -->
    <div class="container">
    <div class="row">
    <div class="overlay-main v-align">
      <div class="col-md-10 col-xs-11">

        <h1 class="onStep" data-animation="animbouncefall" data-time="300">LOUIS WALLACE CONSTRUCTION</h1>
        <div class="onStep" data-animation="fadeInUp" data-time="600" id="slidertext" style=" text-shadow: 2px 1px 4px black;">
          <h3 class="main-text">Oroville General Contractor</h3>
          <h3 class="main-text">Over A Decade Of Experience</h3>
          <h3 class="main-text">All Phases Of Construction</h3>
        </div>
        <p class="onStep" data-animation="animbouncefall" data-time="900">No matter how large or small the project, we ensure that your project is completed with precision and professionalism. We take pride in our quality craftsmanship, our attention to detail, and our open line of communication with each and every customer. With each project, we understand that our role is about more than simply putting up walls — it’s about ensuring that your vision is turned into a reality.
     </div>
    </div>
    </div>
 </div>

Upvotes: 2

Rigel1121
Rigel1121

Reputation: 2034

Add id to div and just target the <p> tag: 

<!-- intro -->
<div class="container">
<div class="row">
<div class="overlay-main v-align">
  <div class="col-md-10 col-xs-11" id="divwithp">

    <h1 class="onStep" data-animation="animbouncefall" data-time="300">LOUIS WALLACE CONSTRUCTION</h1>
    <div class="onStep" data-animation="fadeInUp" data-time="600" id="slidertext" style=" text-shadow: 2px 1px 4px black;">
      <h3 class="main-text">Oroville General Contractor</h3>
      <h3 class="main-text">Over A Decade Of Experience</h3>
      <h3 class="main-text">All Phases Of Construction</h3>
    </div>
    <p class="onStep" data-animation="animbouncefall" data-time="900" style="font-weight:500" style="text-shadow:20px 20px 20px black;">No matter how large or small the project, we ensure that your project is completed with precision and professionalism. We take pride in our quality craftsmanship, our attention to detail, and our open line of communication with each and every customer. With each project, we understand that our role is about more than simply putting up walls — it’s about ensuring that your vision is turned into a reality.
 </div>
</div>
</div>


#divwithp p{
//properties here
}

You can also just target the <p> tag using its class:

.onStep{
//properties here
}

Upvotes: 1

Related Questions