h1 tags all inherit drop shadow

Report · Jun 24, 2021

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>

Report · Jun 24, 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, the only real Dreamweaver alternative.

Report · Jun 24, 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;

Report · Jun 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

Report · Jun 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.

Report · Jun 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;

Report · Jun 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 & Moderator

Report · Jun 25, 2021

Just an example used : )

Report · Jun 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 & Moderator