[RESOLVED] Build a Tribute Page: CSS Styles Won't Inherit in CodePen

EDIT: THIS IS RESOLVED!

Hi everyone, first time poster! I’m working on my tribute page but am running into an issue with CodePen. I added a Google Font and I want the font to apply to all my elements in the body tag but the font isn’t showing up.

It only works when I add “font-family: Sevillana” directly to the <h1> and <h2> selectors in CSS. The yellow background color isn’t showing up either and I’m not sure what’s going on.

Can someone please let me know what the issue could be/if there’s anything wrong with my code? Click this link to access my CodePen. Thank you so much for your help!

EDIT: THIS IS RESOLVED!

The style element should only be used in HTML, in the head element, only when doing internal styling. Your styling should be external.

In codepen, the CSS editor is like an external stylesheet. An external stylesheet would not contain an HTML tags.

Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.

  • For instance, links to fonts go in the box labeled ‘Stuff for <head>’
1 Like

Thanks for responding, this info is very helpful! Whoops, I meant <h1> and <h2> selectors in the CSS, not tags :joy: I completely forgot that you only use the <style></style> tags in the HTML document. As soon as I removed them, it worked. I also didn’t realize it had a space in the settings for the <head> tag so I’ll make use of that. Thanks again!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.