HTML and CSS linking problem in "Linking the CSS File" (5/16) lesson


#1

I made it through lessons 5 and 6 with all instructions completed and checked, but for some reason, the font of the paragraph in lesson 5 doesn’t change even though the HTML and CSS files are linked properly. I believe that my code for the paragraph’s font family in the CSS file is correct, and in lesson 6, where I was instructed to color all h1 elements maroon, it worked just fine.

Here’s my HTML code linking the two files:

<head>
  <title>Vacation World</title>
  <link href="./style.css" type="text/css" rel="stylesheet">
</head>

And here’s my CSS style code:

<head>
  <style>
    p {
      font-family: Arial;
    }
    h1 {
      color: maroon;
    }
  </style>
</head>

As I mentioned above, the h1 elements did change to maroon but the p elements did not change to Arial font. Here’s a screenshot showing the issue I’m facing. I highlighted the text that isn’t updating and its corresponding code in the editor.

Something I did notice is that in the next lesson, after running my code which changed all h1 elements to maroon, the instructions checked each task as okay, but then the miniature web browser didn’t update according to my CSS code. I tried to refresh my browser page and that seemed to push something through, and as you can see in my screenshot, the h1 element (“Top Vacation Spots”) turned maroon. This same thing happened to me in the next two lessons, where I was instructed to turn that same h1 element teal and then capitalize it, and my code was correct but the miniature webpage didn’t update until I refreshed the entire page.

I’m concerned that my code is wrong somewhere that I’m not seeing.


#2
    p {
      font-family: Arial;
    }
    h1 {
      color: maroon;
    }

These selector rules should be cut from the embedded style sheet and pasted into the external file, style.css.

It looks like you have done as instructed, so there shouldn’t be a problem. Try something outlandish and see that it takes so you can confirm your style sheet is loading.


#3

So I fiddled around with it and discovered that it was that specific class selector in my style.css file that was causing the issue. I made another “p” selector with the same command, removed the first “p” selector, and when I ran the code, the paragraph element changed to Arial font. Not sure what was happening there, but at least it’s working now. Thanks for the response!


#4

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