Noob CSS question about classes implementation in html file-CodePudding

I'm just starting to learn html and may have a super nooby question... Here is my header in CSS file:

h1.heading {
    color: indianred;
}

I link it to my html file this way, but it doesn't seem to work

<link rel="stylesheet" type="text/css" href="style.css">

<h1> BeeHaven Apiaries </h1>

CodePudding user response：

The issue with your code is that you have not properly configured your HTML and CSS selectors.

The issue is that you have forgotten to add a class attribute to your h1 tag.

<h1 >Heading!</h1>

This is the issue, because in your CSS, you are referencing it with .heading.

h1.heading {
  color: indianred;
}

Basically, your CSS code means that it will select an element that is a h1 and has a class (.) of heading.

This is your fully working code.

h1.heading {
  color: indianred;
}

<h1 >BeeHaven Apiaries</h1>

Another solution that you can do is to edit the CSS instead of the HTML.

In the CSS, simply remove the class selector to avoid getting the class attribute, and only get h1 tags.

h1 {
  color: indianred;
}

Warning! Please be aware of the consequences this approach has. All h1 tags will have the styles defined in the CSS.

The finished code should look like this.

h1 {
  color: indianred;
}

<h1>BeeHaven Apiaries</h1>

In summary, there are two solutions for making your code work.

The first one will edit the HTML, and add a class attribute so that the CSS can find it properly.

The second solution edits the CSS so that it'll get all of the h1 tags in the entire HTML document.

CodePudding user response：

Try this:

<!-- HTML -->
<h1> BeeHaven Apiaries </h1> 

/* CSS */
h1 {
    color: indianred;
}

<!-- HTML -->
<h1 class = "heading"> BeeHaven Apiaries </h1> 

/* CSS */
h1.heading {
    color: indianred;
}