My HTML/CSS link seems to be broken.
I finished the survey form project months ago, but I was redoing to practice my skills. Suddenly, as I was working on it my preview screen blinked and when it showed up again, it was obvious my CSS was no longer affecting my HTML. I checked my head’s link to my CSS, and even rewrote it. Nothing worked. Can any of you help?
Here’s My HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Survey Form</title>
<link rel="stylesheet" href="styles.css" />
<!--Anta-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anta&display=swap" rel="stylesheet">
<!--Josefin Sans-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anta&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1 id="title">Bible App Preferences</h1>
<p id="description">Fill this out so we can tailor our Bible app to your needs.</p>
</header>
<main>
<form id="survey-form">
<section id="identity">
<h2>First Tell Us Who You Are</h2>
<div id="name-container">
<label id="name-label" class="label-small">Name: </label><input id="name" class="text" type="text" placeholder="John Doe" required>
</div>
<div id="email-container">
<label id="email-label" class="label-small">Email: </label><input id="email" class="text" type="email" placeholder="johndoe@nomail.com" required>
</div>
</section>
<section id="experience">
<div id="years-experience">
<label id="number-label" class="large-label">How many years have you been using Bible software? </label><input id="number" class="text" type="number" max="100" min="1" placeholder="10">
</div>
<select id="dropdown" class="text">
<option value="What role?" class="text" disabled selected value>What roles do you play in the church?</option>
<option value="member" class="text">Member</option>
<option value="elder" class="text">Elder</option>
<option value="deacon" class="text">Deacon</option>
<option value="Foriegn Missionary" class="text">Foreign Missionary</option>
</select>
<div id="bible-apps-used">
<label id="large-label">What Bible apps have you used?</label>
<div id="bible-app-list">
<div id="checkbox-item">
<input value="logos" type="checkbox"><label class="label-small">Logos</label>
</div>
<div id="checkbox-item">
<input value="biblehub" type="checkbox"><label class="label-small">Bible Hub</label>
</div>
<div id="checkbox-item">
<input value="bibleproject" type="checkbox"><label class="label-small">Bible Project</label>
</div>
<div id="checkbox-item">
<input value="blueletterbible" type="checkbox"><label class="label-small">Blue Letter Bible</label>
</div>
</div>
</div>
</section>
<section id="expectations">
<label class="large-label">Are you disatisfied with your present bible app?</label>
<div id="yesOrNo">
<input type="radio" id="yes-or-no" value="Yes" name="Yon" checked><label class="label-small">Yes</label>
<input type="radio" value="No" id="yes-or-no" name="Yon"><label class="label-small">No</label>
</div>
<div id="additional-info">
<label class="label-small">Do you have any other helpful information for us?</label>
<textarea class="text" type="text" rows="3"></textarea>
</div>
</section>
<button id="submit" type="submit">Submit</button>
</form>
</main>
</body>
Here’s My CSS
/*Installed Fonts: Anta, Josefin Sans */
/*Start General Styles*/
:root{
--main-text-color: rgb(30,30,30);
--heading-color: rgb(10,10,10);
--background-color: rgba(120,120,120,.9);
--background-color-two: rgba(120,120,120,.7);
--input-color: rgba(230,230,230);
--border-color: rgba(60,60,60,.5;
}
* {
box-sizing: border-box;
}
.large-label{
text-align: center;
color: var(--main-text-color);
font-family: josefin sans;
}
.label-small{
color: var(--main-text-color);
font-family: josefin sans;
}
.text, textarea, option{
background: var(--input-color);
color: var(--main-text-color);
border: none;
width: 200px;
height: 22.5px;
margin: 4px;
font-size: 16px;
}
/*End General Styles*/
body {
background: url(https://svgur.com/i/13_d.svg);
background-size: cover;
width: 90vw;
margin: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
/*Header styles*/
header {
height: 70px;
background: var(--background-color);
display: block;
border-bottom: 4px solid rgba(80,40,10,.5);
}
#title {
width: 100%;
text-align: center;
font-family: Anta;
color: var(--heading-color);
}
#description {
width: 100%;
text-align: center;
margin-top: -15px;
font-family: josefin sans;
color: var(--main-text-color);
}
/*Main Styles*/
main {
width: 100%;
display: flex;
justify-content: center;
background: var(--background-color-two);
}
h2 {
color: var(--heading-color);
font-family: anta;
}
#survey-form {
width: 100%;
display: grid;
justify-content: center;
justify-items: center;
}
/*#Identity Styles*/
#identity {
width: 100%;
display: grid;
justify-content: center;
border-bottom: 2px solid var(--border-color));
}
#name-container, #email-container{
display: flex;
align-items: center;
justify-content: space-evenly;
}
/*#Experience Styles*/
#experience{
width: 100%;
border-bottom: 2px solid var(--border-color);
display: grid;
justify-items: center;
}
#number {
width: 46px
}
#dropdown {
width: 290px;
}
#bible-apps-used {
width: 100%;
display: grid;
justify-items: center;
}
#bible-app-list{
display: grid;
grid-template-columns: auto auto;
width: 300px;
}
#checkbox-item {
width: 150px;
height: 30px;
}
/*Expectations Styles*/
#expectations {
width: 100%;
display: grid;
justify-items: center;
}
#additional-info {
display: grid;
justify-items: center;
}
#additional-info > textarea {
height: 45px;
width: 240px;
}
/*Submit & Footer Styles*/
#submit{
width: 350px;
height: 50px;
font-size: 30px;
font-family: josefin sans;
font-weight: bold;
background: rgb(80,80,80);
border: none;
}
! Thanks! That was a silly mistake.