htmlcsstextfontshtml-heading

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

Solution

  • 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>