I'm having trouble with my CSS changes not appearing on the webpage, and I can't seem to figure out why. Specifically, I'm attempting to modify the font, which has previously worked but is now not taking effect. Both my CSS and HTML files are located in the same directory. My current setup involves Python, Bootstrap, Flask, and Visual Studio Code. Below is the CSS code I am using:
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
@import url('https://fonts.googleapis.com/css?family=Staatliches');
.container-fluid {
color: red;
font-family:'Staatliches', cursive;
}
body {
font-family: 'Staatliches', cursive;
}
Here is the corresponding HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Complete Bootstrap 4 Website Layout</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" integrity="sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1" crossorigin="anonymous"></script>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
... (Incomplete HTML code)...
<p>When reloading the page in localhost, the CSS modifications do not take effect. Changes made to the HTML reflect correctly, indicating that there is an issue specific to the CSS styling. Any suggestions or assistance would be greatly appreciated. Thank you.</p>
</div></questionbody>
<exquestionbody>
<div class="question">
<p>The fonts in my CSS aren't being applied as expected, and I'm struggling to identify the cause of this issue. Previously, the font changes worked fine, but now they're not showing up. My CSS and HTML files are both in the same folder. I'm using Python, Bootstrap, Flask, and Visual Studio Code for development. The following snippet displays my CSS code:</p>
<pre><code>@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
@import url('https://fonts.googleapis.com/css?family=Staatliches');
.container-fluid {
color: red;
font-family:'Staatliches', cursive;
}
body {
font-family: 'Staatliches', cursive;
}
And here's a glimpse at my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Complete Bootstrap 4 Website Layout</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" integrity="sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1" crossorigin="anonymous"></script>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
... (HTML code continuation)
<p>Upon refreshing the page on localhost, the CSS alterations don't register. The HTML adjustments display correctly, emphasizing the CSS discrepancy. Your insights or recommendations would be invaluable. Thank you.</p>
</div>
</exquestionbody>
<answer1>
<div class="answer" i="54184763" l="4.0" c="1547470168" a="RGltYSBNZXNoa292" ai="1310636">
<p>You may want to try calling the font CSS files directly in the header section rather than importing them.</p>
<pre><code><head>
...
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500,700" type="text/css" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
Subsequently, verify in the network panel if the file is successfully loaded.