Learn CSS Foundations Projects - CSS Foundations Exercise C

The Odin Project
1

I don’t understand exactly what I’m supposed to do about the question " You should have a list of fonts containing Helvetica and Times New Roman with sans-serif as a fallback." Someone else mentioned " use the link tag and put the links to those fonts in href attribute, then you can use them in css with font-family property.
don’t forget the rel attribute." but I have no idea how that should be formulated.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Grouping Selectors</title>
    <link rel="stylesheet" href="styles.css">
    
  </head>
  <body>
   
  
    <button class="i">Click Me!</button>
    
    <button class="o">No, Click Me!</button>
  
   
 </body>
</html>

/* file: styles.css */
.i {
 background: black;
 color: white;
   }
.o {
 background: yellow
   }
.i, .o {
    font-size: 28px;
    font-family: helvetica, "times new roman", sans-serif;
   }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Challenge Information:

Learn CSS Foundations Projects - CSS Foundations Exercise C

2

It should be Helvetica and "Times New Roman", using the correct capitalization.

1 Like
3

Oh yeah I tried it with the capitalization but it didn’t seem to fix the issue so I thought it didn’t matter. I’ll keep the capitalization in check though thanks, but do you perhaps have any idea what I’m missing here?

4

Oh wait never mind, I was basically there just a small mistake really. Thanks

5

Hi lasjorg, where can I learn what are font families and which are specific fonts? I struggled for ages on this problem as I had Helvetica in quotes :frowning:

6

Helvetica in quotes should work. The quotes are needed for font names with spaces.

Depending on the system, what font is shown depends. On my system, Helvetica renders as Arial which is just the default sans-serif font on Windows (Arial is a Microsoft “Helvetica compatible” font).