What do I do if the code for the font for the css stylesheet but the text is not working properly?

Question

I had gotten help from a friend since I had started crying since I am still new and learning CSS for a class in college. 
We got to a certain point about three questions to the last step but the font for the headlines/titles for the playbills doesn't completely work. The one for Othello (play 3) worked completely, "The merry wives of Windsor" and " the importance of being Earnest" semi-works to where it started but didn't finish (play 1 and play 4). " A Streetcar named Desire" (play 2) does not work at all. Below is the coding for the title of each play:

 

       #play1 {
            background-color: hsl(240, 100%, 88%);
        }
        #play1 > h1 {
            font-family: Champagne, cursive;
        }
        #play2 {
            background-color: hsl(25,88%,73%);
        }
        #play2 > h1 {
            font-family: Grunge, "Times New Roman", Times, serif;
        }
        #play3 {
            background-color: hsl(0, 100%, 75%);
        }
        #play3 > h1 {
            font-family: Impact, Charcoal, sans-serif;
        }
        #play4 {
            background-color: hsl(296, 86%, 86%);
        }
        #play4 > h1 {
            font-family: Dobkin, cursive;
        }

If you have any idea or any possible changes we can make to make it work, please let me know. Thanks!

edit: this is the HTML code, I deleted the paragraphs and any words in a Notepad to be more focused on the question.

Edit 2: I thought when asking about the HTML code, I thought it was the actual Html coding, but the assignment solely focuses on the stylesheet.

the stylesheet coding

@charset "utf-8";

@font-face {
    font-family: "font name";
    src: url('cac_champagne.woff') format('woff'),
    url('cac_champagne.tff') format('truetype');
}

@font-face {
    font-family: "font name";
    src: url('1942.woff') format('woff'),
    url('1942.tff') format('truetype');
}

@font-face {
    font-family: "font name";
    src: url('dobkinplain.woff') format('woff')
    url('dobkinplain.tff') format('truetype');
}


/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 2
   Case Problem 1
   
   PHCT Typographic Style Sheet

   Filename: ph_styles.css

*/

/* I have no idea what I am doing. */
/* Structural Styles */

html {
    background-color: hsl(91, 8%, 56%);
}

body {
    background-color: hsl(58, 31%, 84%)
    font-family: 'Palantino Linotype', 'Book Antiqua', Palatino, serif;
}

h1{
    color: black;
}
section > p{
    margin: 0px;
    padding-top: 5px;
    padding-right: 25px;
    padding-left: 25px;
    padding-bottom: 25px;
}

section > aside{
    font-size: 1.1em;
    text-align: center;
}

section > nav{
    font-size: 0.9em;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Navigation Styles */
nav > ul > li > a{
    font-family: 'Trebuchet MS', Helvetica, sans-serif;
    padding-top: 10px;
    padding-bottom: 10px;
}

nav > ul > li > a:link, a:visited{
    color: white;
    text-decoration: none;
    background-color: hsla(0, 0%, 42%, 0.4);
}

nav > ul > li > a:hover, a:active{
    color: hsla(0, 0%, 100%, 0.7);
    background-color: hsl(0, 0%, 42%, 0.7);
}

/* Section Styles */
section.playbill h1{
    font-size: 3em;
    font-weight: normal;
    margin: 0px;
    padding-top: 20px;
    padding-right: 0px;
    padding-bottom: 10px;
    padding-left: 20px;
}

#play1{
    background-color: hsl(240, 100%, 88%);
}
#play1 > h1{
    font-family: Champagne, cursive;
}
#play2{
    background-color: hsl(25,88%,73%);
}
#play2 > h1{
    font-family: Grunge, "Times New Roman", Times, serif;
}
#play3{
    background-color: hsl(0, 100%, 75%);
}
#play3 h1{
    font-family: Impact, Charcoal, sans-serif;
}
#play4{
    background-color: hsl(296, 86%, 86%);
}
#play4 > h1{
    font-family: Dobkin, cursive;
}

/* Description List Styles */

font-style: normal;
margin: 0px, 5 px, 25px

text-align: center;

Crying about CSS is very common as it breaks pretty often. Can you include the Html of the CSS in question. — Arundeep Chohan, Jun 02 '22 at 04:16

score 0 · Answer 1 · answered Jun 02 '22 at 04:27

<!DOCTYPE html>
<html>
<head>
<style>
#play1 {
    background-color: hsl(240, 100%, 88%);
}
#play1 > h1 {
    font-family: Champagne, cursive;
}
#play2 {
    background-color: hsl(25,88%,73%);
}
#play2 > h1 {
    font-family: Grunge, "Times New Roman", Times, serif;
}
#play3 {
    background-color: hsl(0, 100%, 75%);
}
#play3 > h1 {
    font-family: Impact, Charcoal, sans-serif;
}
#play4 {
    background-color: hsl(296, 86%, 86%);
}
#play4 > h1 {
    font-family: Dobkin, cursive;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>
<div id="play1"><h1>This is a paragraph, shown in the Champagne cursive..</h1></div>
<div id="play2"><h1>This is a paragraph, shown in the Grunge New Times.</h1></div>
<div id="play3"><h1>This is a paragraph, shown in the Impact Charcoal</h1></div>
<div id="play4"><h1>This is a paragraph, shown in the Dobkin cursive</h1></div>

</body>
</html>

So I looked at your CSS it seems correct so we need to check the html of what you used.

What do I do if the code for the font for the css stylesheet but the text is not working properly?

1 Answers1