What is preventing my h1 styles from being applied to an h1 element within a <section> tag?

I have a headline in my header and in another part of the content. I've been told that this can impact SEO, but I'm just starting out by copying other people's pages and trying to replicate their styles without looking at their code.

The styling works fine for my headline when I target h1 directly, but it doesn't apply when I target h1 within a specific section class.

h1 {
  text-align: center;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1.7em;
  font-weight: 400px;
  margin: 1px auto 13px;
}

.header h1 {
  border-top: 3px double #232323;
  padding-top: 10px;
  font-family: inherit;
}
<body>
    <h1>This is a headline</h1>
    <section class="header">
        <h1>This is a headline</h1>  
    </section>
</body>

My assumption is that the .h1 class rule is taking precedence over the h1 rule. If this is true, how can I add the top border to my h1 while still inheriting its properties?

I apologize if I am butchering any CSS terminology.

htmlcss

Answer №1

When using the inherit keyword, it signifies that a property will take on the value of its parent element. In this case, the parent is a section with no specific font rules. It is advisable to remove the inherit keyword in this scenario.

h1 {
  text-align: center;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1.7em;
  font-weight: 400;
  margin: 1px auto 13px;
}

.header h1 {
  border-top: 3px double #232323;
  padding-top: 10px;
}
<body>
    <h1>This is a header</h1>
    <section class="header">
        <h1>This is a header</h1>  
    </section>
</body>

Answer №2

It appears that there are no major issues with your code. By declaring global h1 properties, they will be applied to all h1 elements on your website.

If you set specific rules, those rules will only affect h1 elements that meet the criteria, while other properties will still be inherited if they differ.

You can view the updated fiddle here: http://jsfiddle.net/lharby/ukhua6jm/2/

For example:

h1 {
   /* Global properties */
   text-align: center;
   font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
   font-size: 1.7em;
   font-weight: 400px;
   margin: 1px auto 13px;
}

.photography h1 {
   border-top: 3px double #232323; /* New property */
   padding-top: 10px;
   font-size: 2em; /* Overrides existing property */
}

Answer №3

To ensure that your <h1> retains its original styles within a <section>, you can use the !important declaration on the specific rules you want to override.

For example, if you wish to maintain the font styling of your original h1 within the section:

h1 {
  text-align: center;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif !important;
  font-size: 1.7em;
  font-weight: 400px;
  margin: 1px auto 13px;
}

Check out the demo here: http://jsfiddle.net/gcj6xLL0/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you modify the color of the dots within the letters "i"?

Is there a method to generate text like the one shown in the image using only css/html (or any other technique)? The dots in any "i's" should have a distinct color. Ideally, I'd like this to be inserted via a Wordpress WYSIWYG editor (since the ...

jqueryhtmlcss

PHP does not properly interpret quotation marks when passed from an HTML form

My current setup involves a simple HTML form with a submit button that triggers my PHP script to process the input. However, I've encountered an issue where my PHP code fails to recognize the quotation mark when using str_replace function. Below is a ...

phphtmlcharacter-encoding

Unique Selector Customization

Is there a way to style all custom elements in CSS? I am looking to make custom elements default to block display (as most browsers render them inline by default) and then adjust as needed. A potential rule I have in mind is: *::custom { display: blo ...

htmlcsscss-selectorscustom-element

Exploring Checkboxes in Hypertext Markup Language

Can anyone advise on the proper HTML input attribute to limit user selection in a list of checkboxes? Specifically, I want users to select no more than three out of five checkboxes without using radio buttons. Please provide solutions using only HTML and n ...

htmlinputattributes

CSS Trouble with Stacking Order

Seeking assistance with my learning/practice journey, any help is greatly appreciated. Please feel free to point out errors or inefficiencies. I currently have four layers in place: .body .main .main-side .sidebar Here is the design I'm trying to r ...

htmlcss

The performance of my SVG Filter is dismal

Here is the SVG filter I am using: <svg style="visibility: hidden; height: 0; width: 0;"> <filter id="rgbShift"> <feOffset in="SourceGraphic" dx="1" dy="-1" result="text1" /> <feFlood flood-color="#FF0000" result=" ...

javascriptcsssvgsvg-filters

Signal for a complete 360 degree rotation of an image

Looking to enhance my 360 image rotator with an indicator that fades out after the first image. I added this function to the end of my 360.js: (function(){ if( $('#first').css('visibility','hidden')) { $('#rotat ...

javascriptjqueryhtmlcss

Steps for successfully passing an object in a dynamically generated function invocation

In my jQuery script, I have a click event bound to thumbnail images with the class "thumbnail": $(".thumbnail").click(function(){ var obj = new Object(); obj.el = "imageEdit"; obj.id = $(this).attr("id").replace("img_",""); openDialogue(obj); }); ...

javascriptjqueryhtmlajax

The Element should take up the entire page with the exception of a 20px margin

I am struggling to create an element that covers the entire page except for a 20px margin on all sides. I have tried implementing a solution using this code, which works in webkit browsers and Firefox but seems to have issues with Internet Explorer (10) an ...

css

Maintaining the active style of Asp.NET 4.0 Menu control even after the mouse is released

Utilizing a standard asp.net menu in an asp.net 4.0 web application, this setup is for a standard web application and not any version of MVC applications currently available. The issue at hand is relatively straightforward. CSS styles are applied to the d ...

asp.netcssmenupseudo-class

Images displaying correctly in Next.js development environment, but failing to load on Github Pages production site

I am currently using Next.js alongside Tailwind CSS and I'm encountering an issue while attempting to set a background image for a specific div. Oddly enough, the image appears to load correctly in development mode, but fails to display when deployed ...

htmlreactjsnext.jstailwind-cssgithub-pages

Modify the div's background color specifically with AngularJS

After creating a list using divs, my goal is to modify only the background color of the selected div when a user makes a choice from the list. I have accomplished this by defining two distinct CSS classes with the main difference being the background colo ...

htmlcssangularjs

Drop-down Navigation in HTML and CSS is a popular way to create

My navigation menu is functioning well and has an appealing design. The HTML structure for the menu is as follows: <div id="menubar"> <div id="welcome"> <h1><a href="#">Cedars Hair <span>Academy</span></ ...

javascriptjqueryhtmlcssnavigation

Send the form via ajax

I am in the process of creating a unique application for my university, which is essentially a social network. One key feature I need to implement is the ability for users to add comments, which involves inserting a row into a specific database. To achieve ...

javascriptjqueryhtmlajaxforms

Attempting to create an auto-suggestion tool that can process and accept multiple input values, filtering out only those that begin with a designated character

I've been working on implementing an auto-suggestion feature that displays suggestions with partial matches or values within the input box. The goal is for it to only provide suggestions that begin with a specific character, like the "@" symbol. Fo ...

javascriptjqueryhtml

Using Tailwind @apply within an Angular application's CSS file

I've noticed a yellow line appearing under the @apply in my CSS files, even though the styles are being applied correctly to the HTML components. This seems to be happening in every CSS file I use. Can anyone shed light on this issue? Removing these ...

cssangulartailwind-cssapply

Issues with animation functionality in Google Chrome

Does anyone know why the blink effect isn't working on Google Chrome? <p class="blink">at least it's not Comic Sans</p> <style> .blink { animation-duration: 1s; animation-name: blink; animation-iteration-count: infinite; anima ...

htmlcssgoogle-chrome

Dealing with pesky table cell padding issues in Chrome

Struggling with table cell paddings in Chrome because it appears that if a table cell doesn't have pure text, the padding isn't applied. Here's my code: <table> <tr> <th></th> <th ...

cssgoogle-chromefirefoxhtml-tablepadding

What is the best way to increase the space between table columns in CSS?

I'm struggling to increase the space between the columns in a simple table with two columns. The column-gap property doesn't seem to be working for me. Any suggestions on how I can achieve this? JSFiddle #t td { -webkit-column-g ...

htmlcsscss-tables

Guide on how to use a tooltip for a switch component in Material-UI with React

I am attempting to incorporate a tooltip around an interactive MUI switch button that changes dynamically with user input. Here is the code snippet I have implemented so far: import * as React from 'react'; import { styled } from '@mui/mater ...

javascriptcssreactjsmaterial-ui