Okay, so I’m currently in the process of styling my “Survey Form” html document as part of the certification project in HTML-CSS.
The problem here is, I can’t seem to figure out how to style the “body element” and “container class” separately with a background image and background color respectively.
Some guidance on the way forward will be much appreciated…
**Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
<head>
<title>Survey Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header class="header">
<h1 id="title">Survey Form</h1>
<p id="description">Thank you for making time to complete this form.</p>
</header>
<main>
<form id="survey-form">
<div class="form">
<label for="name" id="name-label">Name</label>
<input id="name" type="text" name="name" placeholder="Enter your name here" required>
</div>
<div class="form">
<label for="email" id="email-label">Email</label>
<input id="email" type="email" name="email" placeholder="Enter your email here" required>
</div>
<div class="form">
<label for="age" id="number-label">Age(optional)</label>
<input id="age" type="number" name="age" placeholder="age" min="16" max="100">
</div>
<div class="form">
<p>Which option best describes your current status?</p>
<select id="dropdown" name="role" required>
<option disabled="" selected="" value="">(Select an option)</option>
<option value="student">Student</option>
<option value="fulltime">Full-time Job</option>
<option value="parttime">Part-time Job</option>
<option value="unemployed">Unemployed</option>
<option value="other">Other</option>
<option value="prefernot">Prefer not to say</option>
</select>
</div>
<div class="form">
<p> Would you recommend our services to your friend?</p>
<label><input type="radio" value="definitely" name="referrer" checked="">Definitely</label>
<label><input type="radio" value="maybe" name="referrer">Maybe</label>
<label><input type="radio" value="not-sure" name="referrer">Not sure</label>
</div>
<div class="form">
<p>What is your favorite holiday destination?</p>
<select id="fav-feature" name="fav-feature">
<option value="" disabled="" selected="">(Select an option)</option>
<option value="challenges">Africa</option>
<option value="projects">Asia</option>
<option value="community">America</option>
<option value="option source">Europe</option>
</select>
</div>
<div class="form">
<p>What will make your bucket list on every trip? (check all that apply)</p>
<label><input type="checkbox" name="prefer" value="Front-end Projects"></input>Local Cuisine</label>
<label><input type="checkbox" name="prefer" value="Back-end Projetcs"></input>Sight Seeing</label>
<label><input type="checkbox" name="prefer" value="Challenges"></input>Art and Craft</label>
<label><input type="checkbox" name="prefer" value="Videos"></input>Hiking</label>
<label><input type="checkbox" name="prefer" value="City Meetups"></input>City Meetups</label>
</div>
<div class="form">
<p>Any comments or suggestions?</p>
<textarea id="comments" name="comments" cols="30" rows="7" placeholder="Enter your comment here.." max-text="50" ></textarea>
</div>
<div class="form">
<input type="submit" value="Submit" id="submit"></input>
</div>
</form>
</main>
</div>
</body>
</html>
/* file: styles.css */
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:101.0) Gecko/20100101 Firefox/101.0
Challenge: Build a Survey Form
Link to the challenge: