Skip to main content
davidhelp
davidhelp
Inspiring
June 25, 2021
Question

h1 tags all inherit drop shadow

  • June 25, 2021
  • 3 replies
  • 1085 views

Why do the h1 tags all inherit the drop shadow when I only want the h1 tag with the drop shadow?

 

<!DOCTYPE html>
<html>
<head>
<style>

/* different fonts and classes */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

h1.custom { color: green;
  font-size: 300%;

}

h1.center { color: orange;
  font-size: 200%;
  text-align: center;

}

h1 { 
margin: 20px;
padding: 0px;
 color: red;
  text-shadow: 2px 2px 4px #000000;
}



p { color: red;
font-family: 'Open Sans', sans-serif;
font-size: 14pt;
line-height: 1.3em;
text-align: left;
margin: 20px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

p.center {
  text-align: center;
  color: red;
  font-size: 120%;
}

p.large {
  font-size: 200%;
  color: blue;
   text-align: center;
}

</style>
</head>
<body>

<h1 class="custom">This H1 is custom size</h1>

<h1 class="center">This H1 heading is centered</h1>

<h1>This H1 heading is default size</h1>


<p class="center">This paragraph will be red and center-aligned.</p>

<p class="large">This paragraph tag is blue, center-aligned, and custom font-size.</p> 

<p>Paragraph tag. Default size. <br>Lorem Ipsum is simply dummy text of the printing and 

typesetting industry. </p>

</body>
</html>

 

 

 

 

    This topic has been closed for replies.

    3 replies

    Nancy OShea
    Nancy OShea
    Community Expert
    June 25, 2021

    This is a beginner's question.  h1 = ALL h1 headings,  p = ALL paragraphs, etc...

    https://www.w3schools.com/css/

     

    Nancy O'Shea— Product User & Community Expert
      Jon Fritz
      Jon Fritz
      Community Expert
      June 25, 2021

      Let's break down what you have in your CSS...

      h1.custom (affects all <h1> tags with class="custom" in their html)
      h1.center (affects all <h1> tags with class="center" in their html)
      h1 (an element selector that affects all <h1> tags)
      p (an element selector that affects all <p> tags)
      p.center (affects all <p> tags with class="center" in their html)
      p.large (affects all <p> tags with class="large" in their html)

      Right now, your text-shadow setting is sitting on your h1 element selector, so it will affect all <h1> tags in your document. You have two main options...

      1. If you only want it to appear on a single <h1> tag, adding in a selector like "h1.shadow" then adding the property there and adding class="shadow" to a specific <h1> tag would do the trick, and fit within your current selector theme.

      2. Or, you could add text-shadow:none to both of your more specific class selectors to turn off the shadow for those specific tags. Since the h1 rule applies to all <h1> tags, all tags will inherit all settings from it that aren't specifically overwritten by the class selectors h1.center and h1.custom. Basically, you turned on text-shadow for all h1's and are forgetting to turn it off again for the more specific selectors.

       

      On a side note, you should not be using more than one <h1> tag on any given page. Think of the heading tags (<h1> through <h6>) as the outline titles for your page. <h1> is the main heading and should only be used once. <h2> can be used multiple times and is less important than <h1> but more important than <h3> and so on. All of them have their own browser default sizes, weights and margin that need to be overwritten if you want to fully control them.

        davidhelp
        davidhelpAuthor
        Inspiring
        June 25, 2021

        Thanks, I moved the drop shadow to as an example below and it works.

         

        h1.center { color: orange;
        font-size: 200%;
        text-align: center;
        text-shadow: 2px 1px 2px #000000;

        Nancy OShea
        Nancy OShea
        Community Expert
        June 25, 2021

        OK.  But what do shadows, font-size and color have to do with your class name of .center? 

         

        To keep your code sensible, use classnames that describe what you're styling:

        • .center class for centering.
        • .shadow class for shadows.
        • .color class for color, etc...

         

        HTML tags can have multiple classes.

        <h1 class="center shadow orange">Heading 1</h1>

         

        Nancy O'Shea— Product User & Community Expert
          BenPleysier
          BenPleysier
          Community Expert
          June 25, 2021

          The selector is `h1` which means that all `h1`'s will inherit the same styling. Change the selector as with the other two `h1`'s.

          Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
          davidhelp
          davidhelpAuthor
          Inspiring
          June 25, 2021

          Why do they or the 'p's tag only inherit the drop shadow?

          I have the text at diferent sizes and colors but the drop shadow is the thing inherited.

           

          text-shadow: 2px 2px 4px #000000;

          O
          osgood_
          Brainiac
          June 25, 2021

          Its because you have applied the drop shadow to ALL h1 tags rather than only the h1 tags where you require the drop shadow

           

          h1.center or h1.custom selector is where the css shadow should be applied not the h1 selector

          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices