Question 266951 in Html Question posted in
Some basic documentation can be found here.

Html – Multiple h1 headings with differing colors and sizes in css

I’ve been using CSS and HTML for this and im trying to copy exactly whats on this image here

It requires multiple headings that all use h1 apparently

Below is what i’ve tried doing by using multiple h1 but then I searched up how to have multiple h1’s and it’s advised to generally not do that

h1
{
    border : 0px none blue ;
    width : 1000px ;
}
<!DOCTYPE HTML>
<html lang = "en">
<head>
<meta charset ="UTF-8">
<title>Headings!</title>

<style>
h1 {color : Red ; background : Blue ;}

h1 {color : Orange}

h1 {color : Yellow}

h1 {color : Green}

h1 {color : blue}

h1 {color : purple}
</style>
<link rel ="stylesheet" href = "heading.css">

</head>
<body>
<h1>This is a heading using h1<h1>

<h1><p style="text-indent:300px;">This is a heading using h1<h1>

<h1><pre>This is a heading using h1</pre><h1>

<h1>This is a heading using h1<h1>

<h1>This is a heading using h1<h1>

<h1>This is a heading using h1<h1>

</body>

</html>

I’ve put them all in the same folder but i will admit I have no idea what i’m doing

Tags:

4

Answers


  1. 0

    In case you do not need this page in production, you can have as many H1 as you want. In case you prepare the web-page for production you should have only one H1

    Login or Signup to reply.
  2. 0

    When you make a rule that just targets h1 tags, it affects them all! The best way to accomplish this is to create a CSS class for each thing you want to do. You should name them in a way that describes what they do, like this:

    /*This will target ALL <h1> tags*/
h1 {
    border : 0px none blue ;
    width : 1000px ;
}

.bg-blue {background: Blue;}

.indented {text-indent: 300px;}

.text-red {color: Red;}
.text-orange {color: Orange;}
.text-yellow {color: Yellow;}
.text-green {color: Green;}
.text-blue {color: blue;}
.text-purple {color: purple;}
    <h1 class="text-red bg-blue">This is a heading using h1<h1>

<h1 class="orange"><p class="indented">This is a heading using h1<h1>

<h1 class="text-yellow"><pre>This is a heading using h1</pre><h1>

<h1 class="text-green">This is a heading using h1<h1>

<h1 class="text-blue">This is a heading using h1<h1>

<h1 class="text-purple">This is a heading using h1<h1>
    Login or Signup to reply.
  3. 0

    You can use classes to apply different styles to different h1 elements.

    Classes can be set in html with the class="" attribute and used in css by addressing them with a . in front of the class name.

    The following code would be suitable for a production site:

    h1
{
    border : 0px none blue ;
    width : 1000px ;
}
    <!DOCTYPE HTML>
<html lang = "en">
<head>
<meta charset ="UTF-8">
<title>Headings!</title>

<style>
.first {color : Red ; background : Blue ;}

.second {color : Orange}

.third {color : Yellow}

.fourth {color : Green}

.fifth {color : blue}

.sixth {color : purple}
</style>
<link rel ="stylesheet" href = "heading.css">

</head>
<body>
<h1 class="first">This is a heading using h1<h1>

<h1 class="second"><p style="text-indent:300px;">This is a heading using h1<h1>

<h1 class="third"><pre>This is a heading using h1</pre><h1>

<h1 class="fourth">This is a heading using h1<h1>

<h1 class="fifth">This is a heading using h1<h1>

<h1 class="sixth">This is a heading using h1<h1>

</body>

</html>
    Login or Signup to reply.
  4. 0

    When you are developing a real website, it is not a good practice to have multiple h1 tags on the same page. What you are doing here looks like some kind of practice/learning exercise, so it’s not a problem.

    The exercise encourages you to use the same h1 tag as a challenge, so you have to find the way to not use just "h1" selector in the styles section, as those styles will affect every h1 tag.

    You can use inline styles, as you did with

    <h1><p style="text-indent:300px;">This is a heading using h1</p><h1>

    (don’t forget to close the <p> tag, although you could only use the h1 tag here: <h1 style="text-indent:300px;">This is a heading using h1<h1>)

    As a side note, you can center the text of the h1 with text-align: center

    A better way is to use classes:

    <h1 class="class-name-here">This is a heading using h1<h1>

    Then, between the tags, you can use the class selector (with a dot before the name of the class:

    <style>
    .class-name-here {
      text-align: center;
    }
</style>

    Then you can use different classes for each h1 to get what you need, You can chose the class names that you want, the more intuitive, the better.

    Another side note: what you wrote between the <style> tags, you can write on the CSS sheet that you linked: heading.css

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search