What is the most efficient way to define the font properties for all H1-H6 headings in a single declaration

Is there a way to set all font properties for H1-H6 headings in one CSS declaration? CSSLint.net is flagging multiple definitions of heading styles as an issue. I currently have specific styles for each heading level:

h1 { font-size: 1.8em; margin-top: 2em; margin-bottom: .5em; }
h2 { font-size: 1.6em; margin-top: 2em; margin-bottom: .5em; }
h3 { font-size: 1.4em; margin-top: 1.5em; margin-bottom: .5em; }
h4 { font-size: 1.2em; margin-top: 1.2em; margin-bottom: .3em; }
h5 { font-size: 1.1em; margin-top: 1em; margin-bottom: .1em; }
h6 { font-size: 1.0em; margin-top: 1em; margin-bottom: .1em; }

h1, h2 {
padding-bottom:2px;
border-bottom:1px solid #919699;
}

h1, h2, h3, h4, h5, h6 {
font-weight:bold;
line-height:normal;
}
csshtmlxhtml

Answer №1

It's really quite simple... the website is just advising against repeating the same tags multiple times. Instead, consider using a structure like this...

h1 { font-size: 1.8em; margin-top: 2em; margin-bottom: .5em;
padding-bottom:2px;
border-bottom:1px solid #919699;
font-weight:bold;
line-height:normal;}
h2 { font-size: 1.6em; margin-top: 2em; margin-bottom: .5em;
padding-bottom:2px;
border-bottom:1px solid #919699;
font-weight:bold;
line-height:normal;}
h3 { font-size: 1.4em; margin-top: 1.5em; margin-bottom: .5em; 
font-weight:bold;
line-height:normal;}
h4 { font-size: 1.2em; margin-top: 1.2em; margin-bottom: .3em;
font-weight:bold;
line-height:normal;}
h5 { font-size: 1.1em; margin-top: 1em; margin-bottom: .1em; 
font-weight:bold;
line-height:normal;}
h6 { font-size: 1.0em; margin-top: 1em; margin-bottom: .1em;
font-weight:bold;
line-height:normal;}

Your approach was definitely more clear to read... but this method consolidates everything so that each tag is only defined once.

Answer №2

Your sample works well. The advice used to be to only have one h1 heading in your HTML, but the W3C standard has since been updated to allow multiple instances. In fact, they now recommend using as many as you'd like for SEO purposes.

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

Enable the bottom footer to expand along with the content to support a dynamically growing page

I followed a tutorial on keeping footers at the bottom of a webpage (http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page) to create a site with a fixed footer. However, I encountered an issue when there is more content than can fit ...

htmlcss

Retrieving PHP information in an ionic 3 user interface

We are experiencing a problem with displaying data in Ionic 3, as the data is being sourced from PHP REST. Here is my Angular code for retrieving the data: this.auth.displayinformation(this.customer_info.cid).subscribe(takecusinfo => { if(takecusi ...

phphtmlangulartypescriptionic3

Position the button at the bottom of the card using Bootstrap

While exploring a Bootstrap example utilizing the card-deck and card classes (Pricing example), I pondered over how to align buttons correctly when one list has fewer items than others. https://i.sstatic.net/IGN7K.png I aim to vertically align all button ...

htmlcsstwitter-bootstrapbootstrap-4

Having trouble with some JS and Jquery codes not functioning properly in IE until the page is refreshed a few times. Any suggestions on how to fix this issue?

My code seems to be experiencing issues in Internet Explorer where some of the JS and jQuery codes are not functioning correctly initially, but start working after refreshing the page a few times. Any thoughts on why this could be happening? Here is the ...

javascriptjqueryhtml

What is the method of obtaining the file name of the current template within a Jinja2 template?

If I have a code snippet like return render_template('index.html', users=users), is there a way to access the filename within the template without having to pass it explicitly from the view? ...

pythonhtmljinja2

When using a CSS background image in ReactJS, a white space may appear at the bottom of the window

Currently, I am working on creating a background for a React website and implementing it in the div above component. My purpose is to have this background only appear on specific components and not throughout the entire website. However, I am encountering ...

cssreactjsbackground-imageresponsive-images

Column with space between arranged rows in a container

I have a container with multiple rows, each containing several columns. I am looking to adjust the spacing between each column <div class="main" style="margin-bottom:0px"> <div class="container"> <div class="row"> <div ...

cssbootstrap-4

Converted my Flask code into a specialized software package, encountering a perplexing TemplotNotFound error

After reorganizing my Flask code into a Python package structure, I am facing an issue where none of the HTML templates can be found when I run the code. Let me outline the simplified structure of my current Flask package. The run.py file is responsible f ...

pythonhtmlflask

Utilizing a combination of HTML, AJAX, and PHP, transfer an HTML input array via AJAX to a PHP webpage

Despite trying numerous similar solutions, none of them have proven effective for my issue. Within a form, users can input an unspecified amount of select options that can be added as needed using AJAX. My goal is to post this array to a PHP page via AJAX ...

javascriptphpjqueryhtmlajax

I can view this email signature correctly in VS Code and my browser, but all the other applications I've tried so far are unable to display it correctly

Simply put, I am facing an issue with my email signature. I use eM Client, while my client uses Outlook and I've also checked it in iCloud webmail. Surprisingly, none of these platforms display my email signature correctly, but VS Code and all my brow ...

htmlcssimageemailsignature

What is the best way to assign two styles with the same value in a single line of code?

Can you suggest a simpler method for expressing left:15%;right:15%, such as using left,right:15% or something equivalent? Your assistance is greatly appreciated! ...

css

Resize an image to automatically adjust and fit within a designated container

Is there a way to resize an image automatically to fit inside a container with a blank background? Currently, the structure looks like this: <div class="row"> <div class="col-md-3"> <div class="panel panel-primary"> ...

jqueryhtmlcsstwitter-bootstrap

Internet Explorer's support for the `<summary>` tag in HTML

Is there a method to enable the summary tag in Internet Explorer 11, such as using an external library? <details> <summary>Here is the summary.</summary> <p>Lorem ipsum dolor sit amet</p> </details> App ...

javascripthtmlcssinternet-explorer

Conceal an element if the angular attribute does not contain any value

Currently, I am facing an issue with an image element in my project. The path for this image is being fetched from an attribute present on my angular object. However, if this imagePath attribute is empty, a broken image is displayed. I want to avoid rend ...

htmltwitter-bootstrapangularjs

Exploring jQuery's parent selector for traversing the DOM

I am currently working with an array that inserts articles into my website. I have a specific requirement where, upon clicking the title (h3), I need to display more information based on the article's index. To achieve this, I believe I should travers ...

javascriptjqueryhtml

Creating dynamic animations by shifting the hue of an image on a canvas

Recently, I've been exploring the world of canvas tags and experimenting with drawing images on them. My current project involves creating a fake night/day animation that repeats continuously. After trying various approaches like SVG and CSS3 filters ...

javascripthtmlcanvascolorshue

implementing a JavaScript function and declaring a variable from an HTML source

On my webpage, I have a feature that gathers a large amount of data using jQuery. My goal is to limit the number of results displayed by changing the shown results dynamically to create a false-page effect. This functionality is all handled through a singl ...

javascriptjqueryhtml

Troubleshooting the problem of fast rotation and scrolling of text in the middle but slow movement at the end with

Currently, I am utilizing the jquery animate function for animating text while also aiming to rotate the text if a specific degree is passed. In order to achieve this, I have implemented the following code snippet: var leftCss = "-"+$('#mydiv'). ...

javascriptjqueryioscssanimation

Revealing elements with AngularJS ng-show directive prior to concealing them

Currently, I am in the process of implementing a slide effect for bootstrap badges to showcase hierarchical data relationships using AngularJS. My goal is to have a slider-effect that smoothly reveals new sub-categories while concealing previously open su ...

javascriptcssangularjstwitter-bootstrap

What is the best way to close all other accordion tabs when selecting one?

A simple HTML code was created with the full pen accessible here. <div class="center"> <div class="menu"> <div class="item"> <button class="accordionBtn"><i class=&q ...

javascripthtmlcss