Advertisements
I’m looking to enhance the appearance of the text on my website by properly formatting it within my HTML file. Specifically, I’d like to ensure that the code within my HTML file is displayed nicely on the website. Additionally, I’m seeking assistance in implementing a navigation bar for my website. , i want the <div><div> and others to show on the page
I’ve encountered an issue where the following code:
padding:0
margin:0
}
is affecting the layout of my website in an unintended way, the navbar wont stick to the top. I would appreciate guidance on resolving this issue and making sure it doesn’t disrupt the overall design of my website.
Thank you for your assistance.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="styles.css">
</head>
<header>
<nav class="navbar">
<h3>HTML/CSS QUIZ</h3>
<ul>
<li><a href="#HTML">HTML</a></li>
<li><a href="#CSS">CSS</a></li>
</ul>
</nav>
</header>
<body>
<h1>HTML</h1>
<form method="post">
<section class="HTML" id="HTML">
<fieldset class="q1">
<legend class="question">
Q1 What does HTML stand for, and what is its primary purpose?
</legend>
<ul>
<li>
<label for="q1a1">
<input type="radio" id="q1a1" name="q1" value="true">
Hypertext Markup Language - To define the structure of web content
</label>
</li>
<li>
<label for="q1a2">
<input type="radio" id="q1a2" name="q1" value="false">
Hyper Transfer Text Language - To create dynamic web pages
</label>
</li>
<li>
<label for="q1a3">
<input type="radio" id="q1a3" name="q1" value="false">
Hyperlink and Text Manipulation Language - To style web pages
</label>
</li>
<li>
<label for="q1a4">
<input type="radio" id="q1a4" name="q1" value="false">
High-Level Text Management Language - To manage server-side scripts
</label>
</li>
</ul>
</fieldset>
<fieldset class="q2">
<legend class="question">
Q2 What are HTML tags? Provide an example of an HTML tag.
</legend>
<ul>
<li>
<label for="q2q1">
<input type="radio" id="q2a1" name="q2">
Tags to format text, e.g., <format></format>
</label>
</li>
<li>
<label for="q2a2">
<input type="radio" id="q2a2" name="q2">
Tags to add JavaScript code, e.g., <script></script>
</label>
</li>
<li>
<label for="q2a3">
<input type="radio" id="q2a3" name="q2">
Tags to define elements in an HTML document, e.g., <div></div>
</label>
</li>
<li>
<label for="q2a4">
<input type="radio" id="q2a4" name="q4">
Tags for external resources like images, e.g., <img>
</label>
</li>
</ul>
</fieldset>
<fieldset class="q3">
<legend class="question">
Q3 Describe the structure of an HTML document.
</legend>
<ul>
<li>
<label for="q3a1">
<input type="radio" id="q3a1" name="q3">
HTML document has only a body element.
</label>
</li>
<li>
<label for="q3a2">
<input type="radio" id="q3a2" name="q3">
HTML document consists of a head and body section.
</label>
</li>
<li>
<label for="q3a3">
<input type="radio" id="q3a3" name="q3">
HTML document can only contain paragraphs.
</label>
</li>
<li>
<label for="q3a4">
<input type="radio" id="q3a4" name="q3">
HTML document must have at least two body elements.
</label>
</li>
</ul>
</fieldset>
<fieldset class="q4">
<legend class="question">
Q4 What is the purpose of HTML attributes? Provide an example.
</legend>
<ul>
<li>
<label for="q4a1">
<input type="radio" id="q4a1" name="q4">
Attributes define the content of an element, e.g., <pre><p content="text"></p></pre>
</label>
</li>
<li>
<label for="q4a2">
<input type="radio" id="q4a2" name="q4">
Attributes specify the class of an element, e.g., <div class="container"></div>
</label>
</li>
<li>
<label for="q4a3">
<input type="radio" name="q4" id="q4a3">
Attributes add animations to elements, e.g., <img animate="fadeIn">
</label>
</li>
<label for="q4a4">
<input type="radio" name="q4" id="q4a4">
Attributes control the font size of text, e.g., <h1 size="24px"></h1>
</label>
</ul>
</fieldset>
</section>
<h1>CSS</h1>
<section class="css" id="CSS">
<fieldset class="q5">
<legend class="question">
Q1 What does CSS stand for, and what is its primary purpose?
</legend>
<ul>
<li>
<label for="q5a1">
<input type="radio" name="q5" id="q5a1">
Cascading Style Sheets - To define the presentation of web content
</label>
</li>
<li>
<label for="q5a2">
<input type="radio" name="q5" id="q5a2">
Computer Style Scripts - To create interactive web pages
</label>
</li>
<li>
<label for="q5a3">
<input type="radio" name="q5" id="q5a3">
Colorful Styling System - To add images to web pages
</label>
</li>
<li>
<label for="q5a4">
<input type="radio" name="q5" id="q5a4">
Central Style Selector - To manage server-side scripts
</label>
</li>
</ul>
</fieldset>
<fieldset class="q6">
<legend class="question">
Q2 How do you select elements using CSS selectors?
</legend>
<ul>
<li>
<label for="q6a1">
<input type="radio" name="q6" id="q5a1">
By ID only, e.g., #my-element
</label>
</li>
<li>
<label for="q6a2">
<input type="radio" name="q6" id="q6a2">
By class only, e.g., .my-class
</label>
</li>
<li>
<label for="q6a3">
<input type="radio" name="q6" id="q6a3">
By element type only, e.g., p
</label>
</li>
<li>
<label for="q6a4">
<input type="radio" name="q6" id="q6a4">
All of the above
</label>
</li>
</ul>
</fieldset>
<fieldset class="q7">
<legend class="question">
Q3 What is the "box model" in CSS? Explain its components.
</legend>
<ul>
<li>
<label for="q7a1">
<input type="radio" name="q7" id="q7a1">
The box model defines how images are displayed in a web page.
</label>
</li>
<li>
<label for="q7a2">
<input type="radio" name="q7" id="q7a2">
The box model defines how elements are positioned in a web page.
</label>
</li>
<li>
<label for="q7a3">
<input type="radio" name="q7" id="q7a3">
The box model defines how elements are styled and sized, including content, padding, border, and margin.
</label>
</li>
<li>
<label for="q7a4">
<input type="radio" name="q7" id="q7a4">
The box model defines how elements are colored and shaded.
What is a CSS pseudo-class, and provide an example of its usage.
</label>
</li>
</ul>
</fieldset>
<fieldset class="q8">
<legend class="question">
Q4 What is a CSS pseudo-class, and provide an example of its usage.
</legend>
<ul>
<li>
<label for="q8a1">
<input type="radio" name="q8" id="q8a1">
A pseudo-class selects elements with a specific class attribute, e.g., .active
</label>
</li>
<li>
<label for="q8a2">
<input type="radio" name="q8" id="q8a2">
A pseudo-class selects elements based on their position in the HTML structure, e.g., :first-child
</label>
</li>
<li>
<label for="q8a3">
<input type="radio" name="q8" id="q8a3">
A pseudo-class selects elements based on user interactions or states, e.g., :hover
</label>
</li>
<li>
<label for="q8a4">
<input type="radio" name="q8" id="q8a4">
A pseudo-class selects elements based on their IDs, e.g., #menu-item
</label>
</li>
</ul>
</fieldset>
</section>
</form>
</body>
</html>```
```
nav{
width: 100%;
justify-content: flex-end;
display: flex;
}
header{
background-color: #1b1b32;
}```
>Solution :
Firstly, you need to make sure all your page content is within the <body> tags. You can’t have your header element inside the head section. Not really sure what layout you want, but here’s a possbile start:
header {
background-color: #1b1b32;
padding: 0 20px;
}
nav {
width: 100%;
justify-content: space-between;
display: flex;
}
header, header a {
color: white;
}
ul {
list-style: none;
display: flex;
gap: 20px;
}<header>
<nav class="navbar">
<h3>HTML/CSS QUIZ</h3>
<ul>
<li><a href="#HTML">HTML</a></li>
<li><a href="#CSS">CSS</a></li>
</ul>
</nav>
</header>
<h1>HTML</h1>
<form method="post">
<section class="HTML" id="HTML">
<fieldset class="q1">
<legend class="question">
Q1 What does HTML stand for, and what is its primary purpose?
</legend>
<ul>
<li>
<label for="q1a1">
<input type="radio" id="q1a1" name="q1" value="true">
Hypertext Markup Language - To define the structure of web content
</label>
</li>
<li>
<label for="q1a2">
<input type="radio" id="q1a2" name="q1" value="false">
Hyper Transfer Text Language - To create dynamic web pages
</label>
</li>
<li>
<label for="q1a3">
<input type="radio" id="q1a3" name="q1" value="false">
Hyperlink and Text Manipulation Language - To style web pages
</label>
</li>
<li>
<label for="q1a4">
<input type="radio" id="q1a4" name="q1" value="false">
High-Level Text Management Language - To manage server-side scripts
</label>
</li>
</ul>
</fieldset>
<fieldset class="q2">
<legend class="question">
Q2 What are HTML tags? Provide an example of an HTML tag.
</legend>
<ul>
<li>
<label for="q2q1">
<input type="radio" id="q2a1" name="q2">
Tags to format text, e.g., <format></format>
</label>
</li>
<li>
<label for="q2a2">
<input type="radio" id="q2a2" name="q2">
Tags to add JavaScript code, e.g., <script></script>
</label>
</li>
<li>
<label for="q2a3">
<input type="radio" id="q2a3" name="q2">
Tags to define elements in an HTML document, e.g., <div></div>
</label>
</li>
<li>
<label for="q2a4">
<input type="radio" id="q2a4" name="q4">
Tags for external resources like images, e.g., <img>
</label>
</li>
</ul>
</fieldset>
<fieldset class="q3">
<legend class="question">
Q3 Describe the structure of an HTML document.
</legend>
<ul>
<li>
<label for="q3a1">
<input type="radio" id="q3a1" name="q3">
HTML document has only a body element.
</label>
</li>
<li>
<label for="q3a2">
<input type="radio" id="q3a2" name="q3">
HTML document consists of a head and body section.
</label>
</li>
<li>
<label for="q3a3">
<input type="radio" id="q3a3" name="q3">
HTML document can only contain paragraphs.
</label>
</li>
<li>
<label for="q3a4">
<input type="radio" id="q3a4" name="q3">
HTML document must have at least two body elements.
</label>
</li>
</ul>
</fieldset>
<fieldset class="q4">
<legend class="question">
Q4 What is the purpose of HTML attributes? Provide an example.
</legend>
<ul>
<li>
<label for="q4a1">
<input type="radio" id="q4a1" name="q4">
Attributes define the content of an element, e.g., <pre><p content="text"></p></pre>
</label>
</li>
<li>
<label for="q4a2">
<input type="radio" id="q4a2" name="q4">
Attributes specify the class of an element, e.g., <div class="container"></div>
</label>
</li>
<li>
<label for="q4a3">
<input type="radio" name="q4" id="q4a3">
Attributes add animations to elements, e.g., <img animate="fadeIn">
</label>
</li>
<label for="q4a4">
<input type="radio" name="q4" id="q4a4">
Attributes control the font size of text, e.g., <h1 size="24px"></h1>
</label>
</ul>
</fieldset>
</section>
<h1>CSS</h1>
<section class="css" id="CSS">
<fieldset class="q5">
<legend class="question">
Q1 What does CSS stand for, and what is its primary purpose?
</legend>
<ul>
<li>
<label for="q5a1">
<input type="radio" name="q5" id="q5a1">
Cascading Style Sheets - To define the presentation of web content
</label>
</li>
<li>
<label for="q5a2">
<input type="radio" name="q5" id="q5a2">
Computer Style Scripts - To create interactive web pages
</label>
</li>
<li>
<label for="q5a3">
<input type="radio" name="q5" id="q5a3">
Colorful Styling System - To add images to web pages
</label>
</li>
<li>
<label for="q5a4">
<input type="radio" name="q5" id="q5a4">
Central Style Selector - To manage server-side scripts
</label>
</li>
</ul>
</fieldset>
<fieldset class="q6">
<legend class="question">
Q2 How do you select elements using CSS selectors?
</legend>
<ul>
<li>
<label for="q6a1">
<input type="radio" name="q6" id="q5a1">
By ID only, e.g., #my-element
</label>
</li>
<li>
<label for="q6a2">
<input type="radio" name="q6" id="q6a2">
By class only, e.g., .my-class
</label>
</li>
<li>
<label for="q6a3">
<input type="radio" name="q6" id="q6a3">
By element type only, e.g., p
</label>
</li>
<li>
<label for="q6a4">
<input type="radio" name="q6" id="q6a4">
All of the above
</label>
</li>
</ul>
</fieldset>
<fieldset class="q7">
<legend class="question">
Q3 What is the "box model" in CSS? Explain its components.
</legend>
<ul>
<li>
<label for="q7a1">
<input type="radio" name="q7" id="q7a1">
The box model defines how images are displayed in a web page.
</label>
</li>
<li>
<label for="q7a2">
<input type="radio" name="q7" id="q7a2">
The box model defines how elements are positioned in a web page.
</label>
</li>
<li>
<label for="q7a3">
<input type="radio" name="q7" id="q7a3">
The box model defines how elements are styled and sized, including content, padding, border, and margin.
</label>
</li>
<li>
<label for="q7a4">
<input type="radio" name="q7" id="q7a4">
The box model defines how elements are colored and shaded.
What is a CSS pseudo-class, and provide an example of its usage.
</label>
</li>
</ul>
</fieldset>
<fieldset class="q8">
<legend class="question">
Q4 What is a CSS pseudo-class, and provide an example of its usage.
</legend>
<ul>
<li>
<label for="q8a1">
<input type="radio" name="q8" id="q8a1">
A pseudo-class selects elements with a specific class attribute, e.g., .active
</label>
</li>
<li>
<label for="q8a2">
<input type="radio" name="q8" id="q8a2">
A pseudo-class selects elements based on their position in the HTML structure, e.g., :first-child
</label>
</li>
<li>
<label for="q8a3">
<input type="radio" name="q8" id="q8a3">
A pseudo-class selects elements based on user interactions or states, e.g., :hover
</label>
</li>
<li>
<label for="q8a4">
<input type="radio" name="q8" id="q8a4">
A pseudo-class selects elements based on their IDs, e.g., #menu-item
</label>
</li>
</ul>
</fieldset>
</section>
</form>