Why doesn’t my class apply the style I set to the "H1" tag?

Question

Asked 5 years, 10 months ago

Viewed 123 times

4

I did an example of CSS code to learn a little bit more about the use of classes. However, I realized a mistake and I can’t quite understand why.

1° example

.fonte-style-h1 {
	vertical-align: middle;
	font-size: 30%;
	color: yellow;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

<!DOCTYPE html>
<html>
<head>
	<title>CSS</title>	
</head>
<body>	
	<h1 class=".fonte-style-h1">Oie CSS!</h1>	
</body>
</html>

Note in this example I created the class .fonte-style-h1 to define a style for tag content h1 and see that there was no effect.

h1 {
	vertical-align: middle;
	font-size: 250%;
	color: seagreen;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;	
}

<!DOCTYPE html>
<html>
<head>
	<title>CSS</title>	
</head>
<body>	
	<h1>Oie CSS!</h1>	
</body>
</html>

In this second example see that I applied style to the tag h1 in a general way and it worked. It is at this point that my doubt arises.

Why class .fonte-style-h1 does not apply style to tag h1 and when I use h1 instead of the class it works?

7

You are using . before the name of your class:

<h1 class=".fonte-style-h1">Oie CSS!</h1>

Try to use without the stitch this way:

<h1 class="fonte-style-h1">Oie CSS!</h1>

The point is just the reference you use in css, in the class you only use the name. . to define a class and the # to define a id.

It only worked the other way because you assign it directly to H1 that in turn is already reserved, and would not need to . nor #

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by OtavioCapel • **1,513** points · Answer 1 · 2019-01-14T13:19:28+00:00

The correct is <h1 class="fonte-style-h1">Oie CSS!</h1> in the attribute class we don’t need to put the same point in the css file.

You only need to remove the point of <h1 class=".fonte-style-h1">Oie CSS!</h1>

.fonte-style-h1 {
	vertical-align: middle;
	font-size: 30%;
	color: yellow;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

<!DOCTYPE html>
<html>
<head>
	<title>CSS</title>	
</head>
<body>	
	<h1 class="fonte-style-h1">Oie CSS!</h1>	
</body>
</html>