Tell us what’s happening: I cant seem to preview any CSS no matter what I try and change on the CSS tab, I have run the tests and apparently its all fine? Any help/suggestions would be appreciated
Your code so far
<!DOCTYPE html>
<html lang=en>
<head>
<title>Survey Form<title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Tap, Sac & Attack Consumer Survey</title>
</head>
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
font-family: Tahoma;
font-size: 16px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
Challenge Information:
Survey Form - Build a Survey Form
1 Like
You haven’t shared any code in your post so we just have to guess. Make sure your link element has the correct path to the stylesheet.
1 Like
Yeah sorry its my first post here didnt realise I had to put it in, my bad, thanks for the reply though.
1 Like
No problem but I see that the html code looks very short? Did you copy everything in?
1 Like
No I didnt I will do that now!
1 Like
okay so wont let me edit again but here is the full html
<!DOCTYPE html>
<html lang=en>
<head>
<title>Survey Form<title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Tap, Sac & Attack Consumer Survey</title>
</head>
<body>
<h1 id="title">Tap, Sac & Attack Survey<h1>
<p id="description">We want to know more about you and what you would like to see on the channel, please fill in the survey below to help us create the best content for you<p>
<form id="survey-form">
<fieldset id="personal details">
<legend id="section 1 title">Personal Details</legend>
<label id="name-label" for="name">Full Name: <input id="name" name="name" type="text" placeholder="Joe Bloggs" required /></label>
<label id="number-label" for="number">Age (years): <input id="number" type="number" name="age" min="13" max="120" placeholder="30" /></label>
<label id="email-label"for="email">Email: <input id="email" name="email" type="email" placeholder="joebloggs@email.com" required /></label>
</fieldset>
<fieldset>
<legend>Your Interests</legend>
<label for="dropdown">What is your level of interest in Magic the Gathering?
<select id="dropdown" name="interest-type">
<option value="">(select one)</option>
<option value="1">I am just looking into it</option>
<option value="2">I have a deck or two but have not played much</option>
<option value="3">I play regularly</option>
<option value="4">MTG is life</option>
</select>
<label for="favorite-creator">Who is your favorite Magic the Gathering content creator?</label>
<label for="tolarian-community-college"><input id="tolarian-community-college" type="radio" name="favorite-creator" class="inline" value="1" checked /> Tolarian Community College</label>
<label for="command-zone"><input id="command-zone" type="radio" name="favorite-creator" class="inline" value="2"/> The Command Zone</label>
<label for="commanders-quarters"><input id="commanders-quarters" type="radio" name="favorite-creator" class="inline" value="3"/> Commanders Quarters</label>
<label for="nitpicking-nerds"><input id="nitpicking-nerds" type="radio" name="favorite-creator" class="inline" value="4" /> Nitpicking Nerds</label>
<label for="mtggoldfish"><input id="mtggoldfish" type="radio" name="favorite-creator" class="inline" value="5"/> MTGGoldfish</label>
<label for="other"><input id="other" type="radio" name="favorite-creator" class="inline" value="6"/> Other</label>
<label for="video-type">What kind of content do you enjoy most?</label>
<label for="deck-tech"><input id="deck-tech" type="checkbox" name="video-type" class="inline" value="1" checked /> Deck Techs</label>
<label for="gameplay"><input id="gameplay" type="checkbox" name="video-type" class="inline" value="2" /> Gameplay</label>
<label for="previews-reviews"><input id="previews-reviews" type="checkbox" name="video-type" class="inline" value="3"/> Product Previews/Reviews</label>
<label for="lore"><input id="lore" type="checkbox" name="video-type" class="inline"value="4" /> Lore</label>
<label for="how-to"><input id="how-to" type="checkbox" name="video-type" class="inline" value="5"/> How to play</label>
<label for="other"><input id="other" type="checkbox" name="video-type" class="inline" value="6"/> Other</label>
<label for="video-length">What is your preferred video runtime?
<select id="video-length" name="video-length">
<option value="">(select one)</option>
<option value="1">Under 10 mins</option>
<option value="2">Under 20 mins</option>
<option value="3">Under 30 mins</option>
<option value="4">Any runtime</option>
</select>
</fieldset>
<fieldset>
<legend>Feedback</legend>
<label for="feedback">Any other comments:
<textarea id="feedback" name="feedback" rows="3" cols="50" placeholder="The kind of content I wish I could watch is..."></textarea>
</label>
</fieldset>
<input type="submit" value="Submit" id="submit" />
</form>
</body>
</html>
1 Like
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>
) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
2 Likes
Hi and welcome to the forum!
Check all of the tags within the head
element.
Make sure they all open and close correctly.
1 Like
This worked for me thank you very much
1 Like
I put your html code into an html validator and it found a few errors but the first one it found is probably the reason for the issue you reported.
You need a / in the closing tag of the h1
here’s the validator in case you want to try to fix any other errors
https://validator.w3.org/nu/#textarea
system
Closed
January 7, 2025, 1:33am
11
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.