Question no 1

Introduction to World Wide Web

Answer:-
Certainly, here are both multiple-choice questions (MCQs) and a practical task related to HTML
and the World Wide Web:
**Multiple-Choice Questions (MCQs)
1. What does HTML stand for?
a) Hyper Text Markup Language
b) High-Level Text Markup Language
c) Hyperlink and Text Markup Language
d) Hypertext Transfer Protocol
2. Which of the following HTML tags is used to create a hyperlink?
a) <link>
b) <a>
c) <hyperlink>
d) <url>
3. What does CSS stand for in web development?
a) Computer Style Sheets
b) Cascading Style Sheets
c) Creative Style Sheets
d) Coding Style Sheets
4. Which HTML element is used for creating an unordered list?
a) <ul>
b) <ol>
c) <li>
 d) <dl>
5. Which file extension is commonly used for HTML files?
a) .html
b) .css
c) .js
d) .jpg
**Practical Task: Create a Simple HTML Webpage**
Create a basic HTML webpage with the following elements:
1. Title: "My First Webpage"
2. Heading: "Welcome to My First Webpage"
3. Paragraph: "This is a simple webpage created using HTML."
4. An image of your choice (you can use an image URL or upload an image to your project
folder).
5. A hyperlink to any website of your choice.

Question no 2
Website
ANSWER:-

A website is a collection of webpages that are interconnected and hosted on the World Wide
Web (WWW) and accessible through a web browser. Websites are used to present
information, provide services, or promote products and can vary widely in content and
purpose.
**Multiple-Choice Questions (MCQs):**

1. What is a website?
a) A physical server
 b) A collection of webpages
c) A type of software
d) A web browser

2. Which technology is primarily used to create the structure and content of webpages on a
website?
a) JavaScript
b) CSS (Cascading Style Sheets)
c) HTML (Hypertext Markup Language)
d) PHP (Hypertext Preprocessor)

3. Which of the following is NOT a common type of website?

a) Social media platform
b) E-commerce site
c) Microwave oven
d) Blog

4. What does WWW stand for in the context of the internet and websites?
a) World Weather Watch
b) World Wide Web
c) Web Widget Wizard
d) Web Wireless Wonders

5. Which software or technology is used to view websites on a computer or mobile device?

a) HTML
b) Web server
c) Web browser
 d) CSS

**Practical Task: Create a Simple Website Landing Page**

Create a simple website landing page using HTML and CSS. Your landing page should include
the following elements:

1. Title: "Welcome to Our Website"

2. Heading: "Discover Amazing Products"
3. A paragraph describing the purpose of your website (e.g., selling products, providing
information).
4. An image related to your website's content (you can use an image URL or upload an
image).
5. A button or hyperlink to navigate to another page (e.g., "Learn More").

Question no 3
Web Pages
Answer
Web pages are individual documents or files that are part of a website and are
displayed in a web browser when accessed by a user. They contain content such as text,
images, multimedia elements, and hyperlinks. Web pages are written in languages like HTML
(Hypertext Markup Language), and they are the fundamental building blocks of websites.
**Multiple-Choice Questions (MCQs):**
1. What are web pages?
a) Small applications
b) Individual documents in a website
c) Web browsers
d) Social media platforms
2. Which programming language is commonly used to create the structure and content of
web pages?
a) PHP
b) JavaScript
c) HTML
d) Python
3. What is the primary purpose of web pages?
a) To host email accounts
b) To display content on the World Wide Web
c) To store data in a database
d) To run video games
4. Which software is used to view and interact with web pages?
a) Web server
b) Web browser
c) Web hosting provider
d) Web framework
5. What is the typical file extension for web page documents?
a) .txt
b) .web
c) .html
d) .pdf
**Practical Task: Create a Basic Web Page**
Create a basic web page using HTML. Your web page should include the following elements:
1. Title: "My First Web Page"
2. Heading: "Welcome to My Web Page"
3. A paragraph describing your interests or a topic of your choice.
4. An image related to the topic or your interests.
5. A hyperlink to a website you find interesting.

Question no 4:
Different types of websites

Answer

Certainly! Here are multiple-choice questions (MCQs) along

with a task related to different types of websites:
**Multiple-Choice Questions (MCQs):**

1. What are the different types of websites?

a) Social Media, News, Search Engines
b) E-commerce, Blogs, Forums
c) Music, Movies, Weather
d) All of the above
2. Which type of website primarily focuses on user-generated content and
discussions?
a) E-commerce
b) Blog
c) Social Media
d) News
3. Which type of website is designed for buying and selling products or services
online?
a) Blog
 b) Portfolio
c) E-commerce
d) Educational
4. What type of website provides information about a company's products,
services, and contact details?
a) News
b) E-commerce
c) Business
d) Social Media
5. Which type of website often includes features like comments, archives, and
categories for sharing personal thoughts or expertise?
a) E-commerce
b) Blog
c) Portfolio
d) News
**Practical Task: Create a Mock Portfolio Website**
Create a mock portfolio website using HTML and CSS. Your portfolio website
should include the following elements:
1. Title: "John Doe's Portfolio"
2. A navigation menu with links to at least three different sections (e.g., Home,
Projects, Contact).
3. A brief introduction section with your name and a short bio.
4. A section showcasing three fictional project descriptions (include project
names, descriptions, and images).
5. A contact section with your contact information (email, phone number, and a
contact form).
 Question no 5
Architecture of static and
dynamic Webpages

Answer

Certainly! Let's explore the architecture of static and dynamic

webpages through multiple-choice questions (MCQs) and a practical task.
**Multiple-Choice Questions (MCQs):**
1. What is the primary characteristic of static webpages?
a) They can display real-time data.
b) They are generated on the server-side.
c) They do not change content unless manually updated.
d) They require client-side scripting.
2. Which of the following technologies is commonly used to create static
webpages?
a) HTML and CSS
b) JavaScript and PHP
c) Python and Ruby
d) SQL and JSON
3. What defines the architecture of a static webpage?
a) The client-side code
b) The server-side code
 c) The combination of client-side and server-side code
d) The content management system (CMS)
4. In dynamic webpages, how is content typically generated and customized for
each user?
a) By pre-loading all possible content variations
b) By using client-side scripting languages
c) By processing user requests on the server-side
d) By embedding external plugins
5. Which of the following is a common technology used for building dynamic
webpages?
a) HTML
b) CSS
c) AJAX
d) JPG
**Practical Task: Create a Simple Static and Dynamic Webpage**
**Static Webpage:**
Create a static webpage using HTML and CSS. The webpage should include the
following elements:
1. Title: "Static Webpage"
2. A heading with your name.
3. A paragraph describing your hobbies or interests.
4. An image related to one of your hobbies.
**Dynamic Webpage:**
Create a dynamic webpage using HTML, CSS, and JavaScript. The webpage
should include the following elements:
1. Title: "Dynamic Webpage"
2. A heading with the text "Dynamic Content."
3. A button with the label "Change Content."
4. When the "Change Content" button is clicked, the paragraph content should
change dynamically (e.g., display a different hobby or interest).
.

Question no 6:
Difference between Frontend &amp;
Backend Language
Answer
Certainly! Let's explore the differences between frontend and
backend languages through multiple-choice questions (MCQs) and a practical
task.
**Multiple-Choice Questions (MCQs):**
1. Which part of a web application is primarily responsible for the user interface
and how the website looks and feels?
a) Backend
b) Frontend
c) Middleware
d) Full-stack
2. Which of the following languages is commonly associated with frontend
development?
a) Python
b) Ruby
c) JavaScript
d) PHP
3. What is the primary focus of frontend languages and technologies?
a) Handling server-side logic and databases
b) Managing user interactions and presentation
c) Controlling server security
d) Generating API endpoints
4. Backend languages are responsible for:
a) Designing user interfaces
b) Handling server-side business logic and data storage
c) Controlling browser behavior
d) Managing web page layouts
5. Which of the following is a common task for frontend developers?
a) Optimizing database queries
b) Creating API endpoints
c) Styling web pages and handling user interactions
d) Managing server security

**Practical Task: Create a Simple Frontend and Backend Interaction**

**Frontend:**
1. Create a basic HTML webpage with a button and a display area.
2. When the button is clicked, use JavaScript to send an HTTP request to a
backend endpoint.
**Backend:**
1. Set up a simple backend server using a language like Node.js, Python
(Flask/Django), or Ruby (Ruby on Rails).
2. Create an endpoint that responds to the HTTP request from the frontend with
a message like "Hello from the backend!"

Question no 7
What Is HTML?

Answer

HTML (Hypertext Markup Language) is a standard markup

language used to create the structure and content of webpages on the World
Wide Web (WWW). It defines the elements and structure of a webpage,
allowing web developers to format text, add images, create hyperlinks, and
structure content on a webpage.

**Multiple-Choice Questions (MCQs):**

1. What does HTML stand for?
a) Hyper Transfer Markup Language
b) Hypertext and Text Markup Language
c) Hyperlinking Text Markup Language
d) Hypertext Markup Language
2. What is the primary purpose of HTML?
a) To style webpages
b) To create interactive web applications
c) To structure and format web content
d) To send emails
3. Which HTML element is used to create a hyperlink?
a) <link>
b) <a>
c) <h1>
d) <p>
4. What is the purpose of HTML tags?
a) To display advertisements on webpages
b) To define the structure and content of a webpage
c) To create animations on a webpage
d) To send data to a server
5. Which of the following is NOT a valid HTML element?
a) <div>
b) <paragraph>
c) <img>
d) <ul>

**Practical Task: Create a Simple HTML Webpage**

Create a basic HTML webpage with the following elements:

1. Title: "My First Webpage"
2. Heading: "Welcome to My First Webpage"
3. A paragraph describing your interests or a topic of your choice.
4. An image related to the topic or your interests.
5. A hyperlink to a website you find interesting.
 Question no 8
HTML building blocks
Answer
HTML (Hypertext Markup Language) building blocks are the
fundamental elements and tags used to create the structure and content of a
webpage. These building blocks allow web developers to format text, add
images, create hyperlinks, and structure content on a webpage. Here are some
of the key HTML building blocks:

1. **HTML Document Structure**: The basic structure of an HTML document

consists of the following building blocks:
- `<!DOCTYPE html>`: Declaration specifying the document type.
- `<html>`: The root element that encloses all other HTML elements.
- `<head>`: Contains metadata about the document.
- `<title>`: Specifies the title of the webpage, displayed in the browser's title
bar or tab.
- `<meta>`: Provides metadata such as character encoding and authorship
information.
- `<link>`: Links external resources like stylesheets.
- `<script>`: Includes JavaScript code or references external script files.
- `<style>`: Contains CSS code for styling.

2. **Text Formatting**:
- `<h1>`, `<h2>`, `<h3>`, ... `<h6>`: Headings for organizing content by
importance.
 - `<p>`: Paragraphs for text content.
- `<br>`: Line breaks.
- `<hr>`: Horizontal lines for separating content.
3. **Lists**:
- `<ul>`: Unordered lists.
- `<ol>`: Ordered lists.
- `<li>`: List items within `<ul>` or `<ol>`.
4. **Links and Anchors**:
- `<a>`: Anchor tags for creating hyperlinks.
5. **Images**:
- `<img>`: Embeds images on a webpage.
6. **Tables**:
- `<table>`: Defines a table.
- `<tr>`: Defines a table row.
- `<td>`: Defines a table cell (data).
- `<th>`: Defines a table header cell.
7. **Forms**:
- `<form>`: Creates a form to collect user input.
- `<input>`: Defines various input types (text, password, radio buttons,
checkboxes, etc.).
- `<button>`: Creates buttons for form submission.
- `<select>`: Defines dropdown select lists.
- `<textarea>`: Creates a multi-line text input area.
8. **Semantic Elements**:
 - `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<footer>`:
Semantic elements that provide meaning to the structure of a webpage.
**Multiple-Choice Questions (MCQs):**
1. What is the purpose of the `<meta>` element in HTML?
a) Define a hyperlink
b) Provide metadata about the document
c) Display an image
d) Create a list
2. Which HTML tag is used to create a numbered list?
a) `<ul>`
b) `<ol>`
c) `<li>`
d) `<a>`
3. Which HTML tag is used to display an image on a webpage?
a) `<img>`
b) `<ul>`
c) `<a>`
d) `<p>`
4. What is the purpose of the `<form>` element in HTML?
a) Define a table
b) Create a hyperlink
c) Create a web form for user input
d) Display metadata

5. Which HTML tag is used to create a horizontal line on a webpage?

 a) `<br>`
b) `<hr>`
c) `<p>`
d) `<h1>`
**Practical Task: Create a Basic HTML Webpage with Building Blocks**
Create a basic HTML webpage using the following building blocks:
1. Title your webpage as "My HTML Building Blocks Page."
2. Include at least two headings (`<h1>` and `<h2>`).
3. Create an ordered list (`<ol>`) with at least three list items (`<li>`).
4. Embed an image (`<img>`) related to a topic of your choice.
5. Add a hyperlink (`<a>`) to an external website.

Question no 9
Basic HTML Page Structure
Answer
The basic HTML page structure consists of essential elements that are used to
create a standard webpage. Here's the typical structure:

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
```
Let's include multiple-choice questions (MCQs) and a practical task related to
the basic HTML page structure.
**Multiple-Choice Questions (MCQs):**
1. What is the purpose of the `<!DOCTYPE html>` declaration in HTML?
a) It defines the character encoding of the document.
b) It specifies the version of HTML being used.
c) It declares the document as an HTML5 document.
d) It provides a title for the webpage.
2. What is the role of the `<head>` element in an HTML document?
a) It contains the main content of the webpage.
b) It defines the page's structure and layout.
c) It holds metadata and links to external resources.
d) It displays visible text on the webpage.
3. Which HTML tag is used to specify the character encoding of the document?
a) `<meta>`
b) `<head>`
c) `<title>`
d) `<body>`
4. What is the purpose of the `<title>` element in the `<head>` section of an
HTML document?
a) It defines the primary heading of the webpage.
b) It provides a title for the browser's title bar or tab.
c) It creates a hyperlink to another webpage.
d) It sets the background color of the webpage.
**Practical Task: Create a Basic HTML Page**
Create a basic HTML page with the following structure:
1. Set the document type declaration to HTML5.
2. Define the character encoding as UTF-8.
3. Give the page a title such as "My Basic HTML Page."
4. Add a heading in the `<body>` section with the text "Welcome to My Page."
5. Create a paragraph in the `<body>` section with a brief description of your
interests or a topic of your choice.

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>

Question no 10
Headings & Paragraphs
Answer:
Headings and paragraphs are essential HTML elements used for structuring
content on a webpage. Headings are used to define the hierarchy and titles of
different sections, while paragraphs are used to display text content.
**Multiple-Choice Questions (MCQs):**

1. Which HTML element is used to create headings?

a) `<head>`
b) `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`
c) `<p>`
d) `<a>`
2. How many levels of headings are available in HTML?
a) 2
b) 3
c) 4
d) 6
3. What is the default font size for the `<h1>` element in most browsers?
a) 10px
b) 12px
c) 16px
 d) 24px
4. Which HTML element is used to create paragraphs?
a) `<p>`
b) `<h1>`
c) `<a>`
d) `<div>`
5. What is the purpose of headings in HTML?
a) To create hyperlinks
b) To define the structure and hierarchy of content
c) To display images
d) To format text

**Practical Task: Create Headings and Paragraphs**

Create an HTML document that includes headings and paragraphs with the
following structure:
1. Set the title of the webpage to "Headings and Paragraphs."
2. Create an `<h1>` heading with the text "Introduction to HTML."
3. Create a `<p>` paragraph with the following text:
"HTML (Hypertext Markup Language) is the standard markup language for
creating webpages on the World Wide Web. It provides the structure and
content of a webpage, allowing developers to format text, add images, create
hyperlinks, and more."
4. Add an `<h2>` heading with the text "HTML Elements."
5. Create another `<p>` paragraph with the following text:
 "HTML consists of various elements and tags that define the structure and
content of a webpage. Common HTML elements include headings, paragraphs,
lists, links, and images."

Question no 11
HTML Formatting
Answer
HTML Formatting refers to the use of HTML tags and attributes to
control the appearance and style of text and elements on a webpage. It allows
web developers to format text, change fonts, adjust text alignment, create lists,
and apply various visual effects. Here are some common HTML formatting
elements:
**HTML Formatting Tags and Attributes:**
1. `<strong>` and `<em>`: Used for strong (bold) and emphasized (italic) text,
respectively.
2. `<u>`: Underlines text.
3. `<s>`: Strikes through text to indicate deletion or no longer relevant
information.
4. `<sub>` and `<sup>`: Creates subscript and superscript text.
5. `<blockquote>`: Defines a block of text as a quotation.
6. `<code>`: Displays inline code or computer code.
7. `<pre>`: Preserves white spaces and line breaks for displaying preformatted
text.
8. `<br>`: Inserts a line break within text.
9. `<hr>`: Adds a horizontal line or rule.

**Multiple-Choice Questions (MCQs) with Correct Answers Marked:**

1. Which HTML element is used to make text bold?
a) `<strong>` **(Correct)**
b) `<b>`
c) `<bold>`
d) `<em>`
2. What is the purpose of the `<em>` element in HTML?
a) It creates a hyperlink.
b) It emphasizes (italicizes) text. **(Correct)**
c) It highlights text with a background color.
d) It creates a block of quoted text.
3. Which HTML element is used to underline text?
a) `<strike>`
b) `<u>` **(Correct)**
c) `<underline>`
d) `<em>`
4. What does the `<s>` element in HTML do?
a) Creates a hyperlink.
b) Makes text bold.
c) Strikes through text. **(Correct)**
d) Centers text on the page.
5. Which HTML element is used for displaying preformatted text?
a) `<code>`
b) `<pre>` **(Correct)**
 c) `<blockquote>`
d) `<hr>`

**Practical Task: Apply HTML Formatting**

Create an HTML document and apply formatting to text using the following
elements:
1. Set the title of the webpage to "HTML Formatting."
2. Create a paragraph (`<p>`) that includes the following text:
"HTML formatting allows you to make text bold, italic, underline text, and
much more."
3. Within the paragraph, use the `<strong>` tag to make the word "bold" appear
in bold.
4. Use the `<em>` tag to italicize the word "italic."
5. Use the `<u>` tag to underline the word "underline."
6. Create a `<blockquote>` element with the following text:
"Quoting someone famous: 'The only way to do great work is to love what you
do.'"
7. Add an `<hr>` element to create a horizontal line below the quote.

Question no 12
HTML Attributes
Answer
HTML attributes are additional pieces of information that can be
added to HTML elements to modify their behavior or provide extra information
about them. Attributes are specified within the opening tag of an HTML element
and are written as name-value pairs. Here are some common HTML attributes:
**Common HTML Attributes:**
1. **class**: Specifies one or more CSS classes that an element belongs to.
2. **id**: Provides a unique identifier for an element.
3. **src**: Specifies the source URL for elements like images and iframes.
4. **href**: Specifies the URL for hyperlinks.
5. **alt**: Defines alternative text for images (useful for accessibility).
6. **title**: Provides a title or tooltip for elements like links and images.
7. **style**: Defines inline CSS styles for an element.
8. **target**: Specifies where to open linked documents (e.g., in a new tab or
window).

**Multiple-Choice Questions (MCQs) with Correct Answers Marked:**

1. What is the purpose of the HTML `class` attribute?
a) It specifies a unique identifier for an element.
b) It defines inline CSS styles for an element.
c) It provides alternative text for images.
d) It specifies one or more CSS classes that an element belongs to.
**(Correct)**
2. Which HTML attribute is used to provide a unique identifier for an element?
a) `src`
b) `id` **(Correct)**
c) `alt`
d) `href`
3. What does the HTML `href` attribute specify?
a) The source URL for elements like images.
 b) The URL for hyperlinks. **(Correct)**
c) Alternative text for images.
d) Inline CSS styles for an element.
4. What is the purpose of the HTML `alt` attribute for images?
a) It defines inline CSS styles for images.
b) It provides a unique identifier for images.
c) It specifies the source URL for images.
d) It defines alternative text for images (useful for accessibility). **(Correct)**
5. Which HTML attribute is used to provide a title or tooltip for elements like
links and images?
a) `class`
b) `id`
c) `title` **(Correct)**
d) `target`
**Practical Task: Use HTML Attributes**
Create an HTML document and use HTML attributes in the following way:
1. Set the title of the webpage to "HTML Attributes."
2. Create an image element (`<img>`) with the following attributes:
- `src`: Set it to the URL of an image of your choice.
- `alt`: Provide a brief description or alternative text for the image.
- `title`: Add a title or tooltip for the image.
3. Create a hyperlink (`<a>`) with the following attributes:
- `href`: Set it to a URL of a webpage you want to link to.
- `target`: Make the link open in a new tab or window.
4. Create a `<div>` element with a `class` attribute, assigning it a CSS class name.
 Question no 13:-
Block Level Element vs Inline
Element
Answer

Block-level elements and inline elements are two different types of

HTML elements, and they behave differently when rendered on a web page.
**Block-Level Elements:**
- Block-level elements are used to create the main structure of a webpage.
- They typically start on a new line and stretch the full width of their parent
container.
- Block-level elements create a "block" of content.
- Examples of block-level elements include `<div>`, `<p>`, `<h1>` to `<h6>`,
`<ul>`, `<ol>`, `<li>`, `<table>`, `<form>`, and more.

**Inline Elements:**
- Inline elements are used within block-level elements to style or modify the
content of a block-level element.
- They do not start on a new line; they flow within the content.
- Inline elements create "inline" content within a block.
- Examples of inline elements include `<span>`, `<a>`, `<strong>`, `<em>`,
`<img>`, `<br>`, `<input>`, and more.
**Multiple-Choice Questions (MCQs) with Correct Answers Marked:**
1. Which type of HTML element is used to create the main structure of a
webpage?
a) Block-level elements **(Correct)**
b) Inline elements
c) Metadata elements
d) Semantic elements
2. How do block-level elements typically appear in relation to other content?
a) They flow within the content.
b) They start on a new line and stretch the full width of their parent container.
**(Correct)**
c) They create inline content within a block.
d) They do not affect the layout of the page.
3. Which type of HTML element is used within block-level elements to style or
modify content?
a) Block-level elements
b) Inline elements **(Correct)**
c) Metadata elements
d) Semantic elements

**Practical Task: Use Block-Level and Inline Elements**

Create an HTML document with the following content:
1. Set the title of the webpage to "Block-Level vs. Inline Elements."
2. Create a block-level element (e.g., `<div>`) with a background color and some
text content.
3. Within the block-level element, create an inline element (e.g., `<em>`) that
emphasizes a portion of the text.
4. Add an image (`<img>`) and provide alternative text using an inline element.
5. Create a list (`<ul>`) with list items (`<li>`) that contain inline elements such as
links (`<a>`).

Question no 14
HTML Tag vs. Element
Answer

HTML Tags and HTML Elements are fundamental concepts in web

development. Let's explore the differences between them and provide some
multiple-choice questions (MCQs) along with a practical task.
**HTML Tag:**
An HTML tag is a part of an HTML code that defines how content on a webpage
is structured or formatted.
- Tags are enclosed in angle brackets (`<` and `>`) and usually come in pairs, an
opening tag and a closing tag.
- Opening tags typically contain the name of the element and may include
attributes.
**HTML Element:**
- An HTML element is made up of an opening tag, content, and a closing tag (if
applicable).
- Elements are used to define the structure and content of a webpage.
- Elements consist of the entire package, including tags and content.
**Multiple-Choice Questions (MCQs) with Correct Answers Marked:**
1. What is the primary purpose of an HTML tag?
a) To define the structure and content of a webpage.
 b) To enclose text that should be displayed in bold.
c) To create hyperlinks.
d) To define inline styles for text.
**Answer: a) To define the structure and content of a webpage.**
2. Which of the following contains both the opening and closing parts of an
HTML element?
a) HTML tag
b) HTML attribute
c) HTML content
d) HTML element
**Answer: d) HTML element**
3. What do HTML tags and elements have in common?
a) They are used to define CSS styles.
b) They are used to create hyperlinks.
c) They both enclose content and provide structure to a webpage.
d) They are used to write JavaScript code.

**Answer: c) They both enclose content and provide structure to a webpage.**

**Practical Task: Create an HTML Element**
Create an HTML document with the following content:
1. Set the title of the webpage to "HTML Tag vs. Element."
2. Create an HTML element (e.g., `<p>`) that contains a sentence or two of text.
3. Within the same element, use an HTML tag (e.g., `<strong>`) to emphasize a
portion of the text.
4. Add another HTML element (e.g., `<a>`) with a link to a website of your
choice.
5. Save the file with an ".html" extension and open it in a web browser to view
your HTML document with elements and tags.

Question no 15
HTML Image & Link
Answer
HTML Image and Link elements are essential for embedding images and
creating hyperlinks in webpages. Let's explore these elements with multiple-
choice questions (MCQs) and a practical task.
**HTML Image (`<img>`) Element:**
The HTML `<img>` element is used to embed images in a webpage.
**HTML Link (`<a>`) Element:**
The HTML `<a>` (anchor) element is used to create hyperlinks to other
webpages or resources.
**Multiple-Choice Questions (MCQs) with Correct Answers Marked:**
1. What is the purpose of the HTML `<img>` element?
a) To create hyperlinks.
b) To display images. **(Correct)**
c) To format text.
d) To define a table.
2. Which attribute of the `<img>` element specifies the source URL of the
image?
a) `alt`
b) `link`
 c) `src` **(Correct)**
d) `href`
3. What does the `alt` attribute in the `<img>` element provide?
a) The title of the image.
b) The image's width and height.
c) A brief description or alternative text for the image. **(Correct)**
d) The image's file size.

4. What does the HTML `<a>` element primarily create?

a) Images
b) Lists
c) Hyperlinks **(Correct)**
d) Tables

5. Which attribute of the `<a>` element specifies the URL to which the hyperlink
should navigate?
a) `href` **(Correct)**
b) `src`
c) `link`
d) `target`

**Practical Task: Use HTML Image and Link Elements**

Create an HTML document with the following content:

1. Set the title of the webpage to "HTML Image & Link."

2. Embed an image using the `<img>` element. You can use any image you like,
and make sure to specify the `src` and `alt` attributes.

3. Create a hyperlink using the `<a>` element that links to a website of your
choice. Specify the `href` attribute.

4. Add a descriptive text near the image and hyperlink to provide context.

5. Save the file with an ".html" extension and open it in a web browser to view
your HTML document with the image and hyperlink.

Question no 16
HTML Table
Answer
An HTML table is a structured way of organizing data in rows and columns on a
webpage. Tables are created using the `<table>` element and consist of multiple
sub-elements, including `<tr>` (table row), `<th>` (table header cell), and `<td>`
(table data cell). Tables are commonly used for displaying data in a tabular
format.

**Multiple-Choice Questions (MCQs) with Correct Answers Marked:**

1. What is the primary purpose of an HTML table?

a) To embed images.
 b) To create hyperlinks.
c) To organize data in rows and columns. **(Correct)**
d) To format text.

2. Which HTML element is used to define a table?

a) `<div>`
b) `<table>` **(Correct)**
c) `<list>`
d) `<row>`

3. What is the role of the `<tr>` element in an HTML table?

a) It defines a table header cell.
b) It specifies the table's width.
c) It represents a table row. **(Correct)**
d) It creates a hyperlink.

4. What does the `<th>` element in an HTML table represent?

a) A table row.
b) A table data cell.
c) A table header cell. **(Correct)**
d) A hyperlink.

5. Which HTML element is used to define a table data cell?

a) `<tr>`
 b) `<table>`
c) `<td>` **(Correct)**
d) `<th>`

**Practical Task: Create an HTML Table**

Create an HTML document with the following content:

1. Set the title of the webpage to "HTML Table."

2. Create an HTML table using the `<table>` element. The table should have at
least three rows and three columns.

3. Add a table header row (`<tr>`) with `<th>` elements to define column
headers.

4. Populate the table with data using `<td>` elements for the remaining rows
and columns.

5. Add some sample data to the table, such as names, ages, and locations.

6. Save the file with an ".html" extension and open it in a web browser to view
your HTML table.

Question no 17
HTML Lists
 Answer
HTML lists are used to organize and present information in a
structured format on webpages. There are three main types of HTML lists:
ordered lists (`<ol>`), unordered lists (`<ul>`), and definition lists (`<dl>`). Lists
can contain list items (`<li>`), which are the individual items or entries within a
list.

**Ordered List (`<ol>`):**

- An ordered list is used to create a numbered list.
- List items are automatically numbered in ascending order (1, 2, 3, ...).

**Unordered List (`<ul>`):**

- An unordered list is used to create a bulleted list.
- List items are typically displayed with bullet points (•, ◦, etc.).

**Definition List (`<dl>`):**

- A definition list is used to create a list of terms and their definitions.
- It consists of pairs of terms (`<dt>`) and their corresponding definitions
(`<dd>`).

**Multiple-Choice Questions (MCQs) with Correct Answers Marked:**

1. What is the primary purpose of an HTML list?

a) To create hyperlinks.
b) To display images.
c) To organize and present information in a structured format. **(Correct)**
 d) To format text.

2. Which HTML element is used to create an ordered list?

a) `<ol>` **(Correct)**
b) `<ul>`
c) `<dl>`
d) `<li>`

3. How are list items typically displayed in an unordered list?

a) With numbers.
b) With checkboxes.
c) With bullet points. **(Correct)**
d) With arrows.

4. What does the HTML `<dl>` element represent?

a) An ordered list.
b) A definition list. **(Correct)**
c) An unordered list.
d) A list of links.

5. Which HTML element is used to define a list item within an ordered or

unordered list?
a) `<tr>`
b) `<li>` **(Correct)**
c) `<th>`
 d) `<dt>`

**Practical Task: Create HTML Lists**

Create an HTML document with the following content:

1. Set the title of the webpage to "HTML Lists."

2. Create an ordered list (`<ol>`) with at least three list items (`<li>`). You can
use any content you like.

3. Create an unordered list (`<ul>`) with at least three list items (`<li>`). Again,
use any content you prefer.

4. Create a definition list (`<dl>`) with at least three term-definition pairs (`<dt>`
and `<dd>`).

5. Add descriptions for each list item and term-definition pair.

6. Save the file with an ".html" extension and open it in a web browser to view
your HTML lists.
Question no 18
HTML Forms
Answer
HTML forms are a crucial part of web development, allowing
users to input and submit data to websites. Forms are created using the
`<form>` element and can contain various form elements such as text fields,
radio buttons, checkboxes, and buttons. Forms are used for user interactions
like submitting contact information, performing searches, or completing online
surveys.

**Multiple-Choice Questions (MCQs) with Correct Answers Marked:**

1. What is the primary purpose of an HTML form on a webpage?

a) To display images.
b) To organize content.
c) To allow users to input and submit data. **(Correct)**
d) To create hyperlinks.

2. Which HTML element is used to define a form?

a) `<input>`
b) `<form>` **(Correct)**
c) `<button>`
d) `<div>`

3. What type of HTML input element is typically used for single-line text input?
a) `<textarea>`
b) `<text>`
c) `<input type="text">` **(Correct)**
d) `<textfield>`
4. Which HTML input type is used to create a checkbox?
a) `<input type="radio">`
b) `<input type="checkbox">` **(Correct)**
c) `<input type="text">`
d) `<input type="button">`

5. What HTML element is used to submit a form?

a) `<submit>`
b) `<button>`
c) `<input type="submit">` **(Correct)**
d) `<form>`

**Practical Task: Create an HTML Form**

Create an HTML document with the following content:

1. Set the title of the webpage to "HTML Forms."

2. Create an HTML form (`<form>`) with the following elements:

- A text input field (`<input type="text">`) for the user's name.
- Radio buttons (`<input type="radio">`) for selecting a gender.
- Checkboxes (`<input type="checkbox">`) for selecting hobbies.
- A textarea (`<textarea>`) for entering comments.
- A submit button (`<input type="submit">`) to submit the form.
3. Add labels (`<label>`) for each form element to provide context.

4. Include a reset button (`<input type="reset">`) to clear the form fields.

5. Save the file with an ".html" extension and open it in a web browser to view
your HTML form.
Question no 19
HTML Layout Elements
Answer
HTML layout elements are used to structure and organize the
content on a webpage. These elements help define the layout and arrangement
of different sections within a webpage, such as headers, navigation menus,
main content, sidebars, and footers. Common HTML layout elements include
`<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, and `<footer>`.

**Multiple-Choice Questions (MCQs) with Correct Answers Marked:**

1. What is the primary purpose of HTML layout elements?

a) To create hyperlinks.
b) To format text.
c) To structure and organize the content on a webpage. **(Correct)**
d) To display images.

2. Which HTML element is typically used to define the main content of a

webpage?
 a) `<main>` **(Correct)**
b) `<header>`
c) `<footer>`
d) `<nav>`

3. Which HTML element represents a standalone piece of content that can be

distributed and reused independently?
a) `<section>` **(Correct)**
b) `<aside>`
c) `<main>`
d) `<article>`

4. What does the HTML `<nav>` element represent?

a) A header section.
b) A sidebar.
c) A navigation menu. **(Correct)**
d) A footer.

5. Which HTML element is used to wrap content that is tangentially related to

the content around it?
a) `<header>`
b) `<aside>` **(Correct)**
c) `<footer>`
d) `<section>`
**Practical Task: Create an HTML Layout**

Create an HTML document with the following content:

1. Set the title of the webpage to "HTML Layout Elements."

2. Create a layout structure using HTML layout elements. Your layout should
include the following sections:
- A `<header>` for the website header.
- A `<nav>` for the navigation menu.
- A `<main>` for the main content of the webpage.
- An `<aside>` for additional content (e.g., a sidebar).
- An `<article>` for a standalone piece of content.
- A `<section>` for a related section within the main content.
- A `<footer>` for the website footer.

3. Add some content (text or placeholders) to each section to demonstrate the

layout.

4. Style the layout using CSS if you'd like to enhance its appearance.

5. Save the file with an ".html" extension and open it in a web browser to view
your HTML layout.
Question no 21
HTML Iframe
 ANSWER
An HTML `<iframe>` (short for "inline frame") is an HTML element
used to embed another HTML document or external web content within a
webpage. `<iframe>` elements are commonly used to display external web
pages, videos, maps, or other content within the context of the host webpage.
Here are some multiple-choice questions (MCQs) and a practical task to
demonstrate the usage of `<iframe>` elements.

**Multiple-Choice Questions (MCQs) with Correct Answers Marked:**

1. What is the primary purpose of the HTML `<iframe>` element?

a) To create hyperlinks.
b) To display images.
c) To embed external web content within a webpage. **(Correct)**
d) To format text.

2. Which attribute of the `<iframe>` element specifies the source URL of the
content to be displayed within the frame?
a) `srcdoc`
b) `href`
c) `source`
d) `src` **(Correct)**

3. How can you specify the dimensions (width and height) of an `<iframe>`
element?
a) Using CSS styles.
 b) By adjusting the `border` attribute.
c) By setting the `size` attribute.
d) By using the `width` and `height` attributes. **(Correct)**

4. What is the purpose of the `allowfullscreen` attribute in an `<iframe>`

element?
a) To make the iframe resizable.
b) To enable fullscreen mode for the embedded content. **(Correct)**
c) To hide the iframe's borders.
d) To disable user interaction with the iframe.

5. Which HTML attribute is used to provide alternative content for browsers

that do not support iframes?
a) `alt`
b) `fallback`
c) `placeholder`
d) `noframe` **(Correct)**

**Practical Task: Use the HTML `<iframe>` Element**

Create an HTML document with the following content:

1. Set the title of the webpage to "HTML Iframe."

2. Use the `<iframe>` element to embed an external webpage of your choice
(e.g., a news website, Wikipedia page, or any other website you like). Set the
`src` attribute to the URL of the external page.

3. Specify the `width` and `height` attributes to define the dimensions of the
iframe.

4. Use the `allowfullscreen` attribute to enable fullscreen mode for the iframe (if
applicable).

5. Provide alternative content within the `<iframe>` element using the

`<noframe>` element. This content will be displayed in browsers that do not
support iframes.

6. Save the file with an ".html" extension and open it in a web browser to view
your webpage with the embedded iframe.

This task will help you practice embedding external web content using the HTML
`<iframe>` element and provide alternative content for browsers that do not
support iframes.
Question no 22
HTML Media Elements
Answer
HTML media elements are used to embed and display various
types of multimedia content within a webpage. These elements allow you to
include images, audio, video, and other multimedia files in your web
documents. Common HTML media elements include `<img>` for images,
`<audio>` for audio files, and `<video>` for video files.
**Multiple-Choice Questions (MCQs) with Correct Answers Marked:**

1. What is the primary purpose of HTML media elements?

a) To create hyperlinks.
b) To format text.
c) To embed and display multimedia content within a webpage. **(Correct)**
d) To define the structure of a webpage.

2. Which HTML element is used to embed and display images on a webpage?

a) `<img>` **(Correct)**
b) `<image>`
c) `<picture>`
d) `<media>`

3. What HTML element is typically used to embed and play audio files on a
webpage?
a) `<audio>` **(Correct)**
b) `<sound>`
c) `<music>`
d) `<media>`

4. Which attribute of the `<video>` element specifies the source URL of the
video file to be played?
a) `srcdoc`
 b) `source`
c) `video-src`
d) `src` **(Correct)**

5. What does the `controls` attribute do when added to a `<video>` or `<audio>`

element?
a) It hides the media player controls.
b) It disables playback of the media.
c) It displays media player controls, allowing users to play, pause, and adjust
volume. **(Correct)**
d) It enlarges the media content.

**Practical Task: Use HTML Media Elements**

Create an HTML document with the following content:

1. Set the title of the webpage to "HTML Media Elements."

2. Embed an image using the `<img>` element. You can use any image you like,
and make sure to specify the `src` and `alt` attributes.

3. Include an audio player using the `<audio>` element. Embed an audio file
(e.g., an MP3 file) and use the `controls` attribute to display the player controls.

4. Embed a video player using the `<video>` element. Use a video file (e.g., an
MP4 file) and include the `controls` attribute to display video player controls.
5. Save the file with an ".html" extension and open it in a web browser to view
your webpage with the embedded media elements.

(css)
Question no 1
What is CSS?
Answer

**CSS (Cascading Style Sheets)** is a stylesheet language used for describing

the presentation and visual style of web documents, including HTML
documents. It enables web developers to control the layout, design, and
appearance of web pages, ensuring a consistent and visually appealing user
experience. CSS works by selecting HTML elements and applying styles to them,
such as colors, fonts, spacing, and positioning.

**Multiple-Choice Questions (MCQs) with Correct Answers Marked:**

1. What does CSS stand for?

a) Creative Style Sets
b) Cascading Script Styles
c) Cascading Style Sheets **(Correct)**
d) Computer Style System

2. What is the primary purpose of CSS in web development?

 a) To define the structure of a webpage.
b) To create hyperlinks.
c) To control the visual style and presentation of web documents.
**(Correct)**
d) To execute client-side scripting.

3. Which of the following is a common use of CSS?

a) To handle server-side logic.
b) To manage databases.
c) To apply styles such as colors and fonts to HTML elements. **(Correct)**
d) To define JavaScript functions.

4. How is CSS typically applied to HTML elements?

a) By using JavaScript.
b) By writing inline styles within HTML tags.
c) By linking external CSS files to HTML documents. **(Correct)**
d) By embedding CSS code directly into HTML documents.

5. What does the term "cascading" in Cascading Style Sheets (CSS) refer to?
a) It refers to the ability to create animations.
b) It signifies the hierarchical nature of CSS rules and how they are applied.
**(Correct)**
c) It indicates the use of color gradients in styles.
d) It represents the process of compressing styles for faster loading.
**Practical Task: Create a CSS Style**

Create an HTML document and a CSS stylesheet with the following content:

**HTML Document:**
1. Set the title of the webpage to "CSS Introduction."

2. Create a heading element (e.g., `<h1>`) with some text.

**CSS Stylesheet:**
1. Style the heading element to change its text color, font size, and text
alignment.

2. Add a background color or background image to the webpage.

3. Apply a border and padding to the heading element.

4. Save the CSS file with a ".css" extension and link it to the HTML document
using the `<link>` element in the document's `<head>` section.

5. Open the HTML file in a web browser to view the styled heading.

Question no 3
CSS Syntax
Answer
 **CSS (Cascading Style Sheets) Syntax** refers to the rules
and structure for writing CSS code, which is used to define the visual style and
layout of HTML elements on a webpage. CSS syntax consists of selectors,
properties, and values. Selectors specify which HTML elements should be styled,
properties define what styles to apply, and values specify the specific values for
those styles. Here are some multiple-choice questions (MCQs) and a practical
task to understand CSS syntax:

**Multiple-Choice Questions (MCQs) with Correct Answers Marked:**

1. What is the purpose of CSS syntax?

a) To define the structure of a webpage.
b) To create hyperlinks.
c) To specify the style and layout of HTML elements. **(Correct)**
d) To execute JavaScript code.

2. Which part of a CSS rule determines which HTML elements the rule applies
to?
a) Properties
b) Values
c) Selectors **(Correct)**
d) Declarations

3. In CSS, what is the purpose of a property?

a) To define a specific style value.
b) To select HTML elements.
 c) To specify the style to be applied. **(Correct)**
d) To create comments in the CSS code.

4. What do CSS values represent?

a) The HTML elements to be styled.
b) The style properties to be applied.
c) The specific style values for a property. **(Correct)**
d) The order of CSS rules.

5. Which CSS symbol is used to separate a property and its value within a CSS
rule?
a) Semicolon (;) **(Correct)**
b) Colon (:)
c) Comma (,)
d) Period (.)

**Practical Task: Write a CSS Rule**

Create an HTML document with a heading element (e.g., `<h1>`) containing

some text. Then, create an external CSS file with the following content:

**CSS Stylesheet (`styles.css`):**

```css
/* This is a CSS comment */
/* Select the h1 element */
h1 {
/* Define the style property and value */
color: blue;
font-size: 24px;
text-align: center;
}
```

1. Save the CSS file with the name "styles.css."

2. Link the CSS file to the HTML document using the `<link>` element in the
document's `<head>` section.

3. Open the HTML file in a web browser to view the styled heading.

Code:

/* This is a CSS comment */

/* Select the h1 element */

h1 {
/* Define the style property and value */
color: blue;
font-size: 24px;
 text-align: center;
}

Question no 4
Selector Types
Answer
In CSS, selectors are patterns that are used to select and target
HTML elements in order to apply styles to them. There are various types of
selectors that allow you to specify which elements should be styled. Here are
some common types of selectors along with multiple-choice questions (MCQs)
and a practical task to help you understand selector types:

**Common Selector Types:**

1. **Type Selector:** Selects elements based on their HTML tag name. For
example, `p` selects all `<p>` (paragraph) elements.

2. **Class Selector:** Selects elements based on the value of their `class`

attribute. For example, `.button` selects all elements with `class="button"`.

3. **ID Selector:** Selects a single element based on the value of its `id`
attribute. For example, `#header` selects the element with `id="header"`.

4. **Universal Selector:** Selects all elements on the page. It is represented by

an asterisk (*).
5. **Descendant Selector:** Selects elements that are descendants of a specific
element. For example, `ul li` selects all `<li>` elements that are descendants of a
`<ul>` element.

**Multiple-Choice Questions (MCQs) with Correct Answers Marked:**

1. What is the purpose of CSS selectors?

a) To define the structure of a webpage.
b) To create hyperlinks.
c) To specify which HTML elements to style. **(Correct)**
d) To execute JavaScript code.

2. Which CSS selector targets elements based on their HTML tag name?
a) Class Selector
b) Type Selector **(Correct)**
c) ID Selector
d) Universal Selector

3. How is a class selector written in CSS?

a) #classname
b) .classname **(Correct)**
c) classname
d) *classname*

4. Which selector type selects all elements on a webpage?

 a) Type Selector
b) Class Selector
c) ID Selector
d) Universal Selector **(Correct)**

5. What does an ID selector target in HTML?

a) All elements with a specific class.
b) All elements with a specific tag name.
c) A single element with a specific ID attribute value. **(Correct)**
d) All elements on the page.

**Practical Task: Apply CSS Selectors**

Create an HTML document with various HTML elements, including paragraphs,

headings, and lists. Then, create an external CSS file and apply the following
styles using CSS selectors:

1. Use a type selector to change the color of all paragraphs (`<p>`) to red.

2. Use a class selector to style all elements with the class `special` by giving
them a background color of yellow.

3. Use an ID selector to style an element with the ID `header` by giving it a bold

font and a blue background.
4. Use a descendant selector to style all list items (`<li>`) that are descendants of
an unordered list (`<ul>`) by giving them a different font color.

5. Use a universal selector to set a margin and padding for all elements on the
page.

Question no 5
CSS Rules Overriding
Answer
**CSS (Cascading Style Sheets) Rules Overriding** refers
to the process by which conflicting CSS rules are applied to the same HTML
element, and the browser determines which rule takes precedence. CSS rules
can override each other based on specificity, importance, and source order.
Let's explore this concept with multiple-choice questions (MCQs) and a practical
task.

**Multiple-Choice Questions (MCQs) with Correct Answers Marked:**

1. What is the term used to describe the process of resolving conflicting CSS
rules?
a) Cascading
b) Overloading
c) Overriding
d) Inheriting
**Answer: c) Overriding**

2. Which factor determines the specificity of a CSS rule?

 a) The length of the selector.
b) The order of the rules in the stylesheet.
c) The importance of the rule.
d) The combination of selector types and selectors used. **(Correct)**
**Answer: d) The combination of selector types and selectors used.**

3. In the event of conflicting CSS rules, which rule typically takes precedence?
a) The rule with the lowest specificity.
b) The rule with the highest specificity. **(Correct)**
c) The rule with the longest selector.
d) The rule defined in the last-loaded stylesheet.

4. What is the importance of the `!important` declaration in CSS?

a) It reduces the specificity of a rule.
b) It prevents the rule from being overridden by other rules.
c) It increases the specificity of a rule. **(Correct)**
d) It disables the rule.

**Practical Task: Demonstrate CSS Rules Overriding**

Create an HTML document with multiple HTML elements, such as headings,

paragraphs, and links. Then, create an external CSS file and apply various
conflicting styles to these elements.
1. Define CSS rules with different selectors, including element type selectors,
class selectors, and ID selectors. Apply conflicting styles (e.g., different text
colors, background colors, and font sizes) to the same HTML elements.

2. Use the `!important` declaration in one of the CSS rules to demonstrate its
impact on rule overriding.

3. Include comments in your CSS file to describe which rules are expected to
override others and why.

4. Observe the results in a web browser to see how CSS rules are applied, taking
into account specificity, importance, and source order.

Question no 6
CSS Comments
Answer
**CSS (Cascading Style Sheets) Comments** are non-
executable lines of text within a CSS file that provide explanations, notes, or
annotations about the code. Comments are ignored by web browsers and are
solely for human readers, such as developers, to understand the code better
and make it more maintainable. They are enclosed within special markers and
do not affect the styling of web content. Let's explore CSS comments with
multiple-choice questions (MCQs) and a practical task.

**Multiple-Choice Questions (MCQs) with Correct Answers Marked:**

1. What is the primary purpose of CSS comments?

a) To execute code in a web browser.
 b) To add visual elements to web content.
c) To provide explanations or notes within the CSS code for developers.
**(Correct)**
d) To define HTML structure.

2. How are CSS comments delimited or enclosed?

a) By curly braces { }.
b) By square brackets [ ].
c) By parentheses ( ).
d) By /* and */. **(Correct)**

3. What happens to CSS comments when a web page is loaded in a browser?

a) They are displayed as part of the web content.
b) They are executed as JavaScript code.
c) They are ignored and have no impact on styling or rendering. **(Correct)**
d) They trigger a browser error.

4. Why are CSS comments useful in web development?

a) They enhance website performance.
b) They add interactivity to web pages.
c) They help developers document and explain their code, making it more
maintainable. **(Correct)**
d) They create visual effects.

**Practical Task: Add CSS Comments**

Create an HTML document and an external CSS file with the following content:

**HTML Document (`index.html`):**

```html
<!DOCTYPE html>
<html>
<head>
<title>CSS Comments Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Hello, CSS Comments!</h1>
<p>This is a sample webpage.</p>
</body>
</html>
```

**CSS Stylesheet (`styles.css`):**

```css
/* This is a CSS comment */
/* Add comments to describe the purpose of each rule below */

h1 {
 color: blue; /* Set text color to blue */
font-size: 24px; /* Set font size to 24 pixels */
}

p{
color: green; /* Set text color to green */
}

/* End of CSS comments */

```

1. In the CSS file, add comments to describe the purpose or intention of each
CSS rule. Use comments to explain the styling choices for the `h1` and `p`
elements.

2. Save both the HTML and CSS files.

3. Open the HTML file in a web browser to view the web page. Notice that the
comments do not affect the appearance of the page but provide helpful
explanations for developers.

Code:
Html
<!DOCTYPE html>
<html>
<head>
 <title>CSS Comments Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Hello, CSS Comments!</h1>
<p>This is a sample webpage.</p>
</body>
</html>

Code css:
/* This is a CSS comment */
/* Add comments to describe the purpose of each rule below */

h1 {
color: blue; /* Set text color to blue */
font-size: 24px; /* Set font size to 24 pixels */
}

p{
color: green; /* Set text color to green */
}

/* End of CSS comments */

 Question no 7
CSS Colors
Answer
**CSS Colors** refer to the property of specifying colors for
HTML elements using CSS. Colors can be applied to text, backgrounds, borders,
and other visual elements on a webpage. CSS provides various ways to define
colors, including named colors, hexadecimal values, RGB values, and HSL values.
Let's explore CSS colors with multiple-choice questions (MCQs) and a practical
task.

**Multiple-Choice Questions (MCQs) with Correct Answers Marked:**

1. In CSS, which property is used to specify the color of text?

a) `background-color`
b) `text-color`
c) `color` **(Correct)**
d) `font-color`

2. What is the purpose of CSS color values?

a) To define the layout of a webpage.
b) To specify the order of HTML elements.
c) To set the color of text, backgrounds, and other visual elements on a
webpage. **(Correct)**
d) To create hyperlinks.
3. Which CSS color value is represented as a word or a name (e.g., "red" or
"blue")?
a) Hexadecimal value
b) RGB value
c) Named color **(Correct)**
d) HSL value

4. How can you define a color using hexadecimal notation in CSS?

a) By using a color name like "green."
b) By specifying the hue, saturation, and lightness values.
c) By using a pound sign (#) followed by a six-digit code. **(Correct)**
d) By using the `rgb()` function.

5. What does the `rgb(255, 0, 0)` value represent in CSS?

a) Green color
b) Blue color
c) Red color **(Correct)**
d) Black color

**Practical Task: Apply CSS Colors**

Create an HTML document and an external CSS file with the following content:

**HTML Document (`index.html`):**

```html
<!DOCTYPE html>
<html>
<head>
<title>CSS Colors Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Welcome to CSS Colors</h1>
<p>This is a sample text with various colors.</p>
</body>
</html>
```

**CSS Stylesheet (`styles.css`):**

```css
h1 {
color: blue;
}

p{
background-color: lightgray;
}

```
1. In the CSS file, set the text color of the `<h1>` element to "green."

2. Set the background color of the `<p>` element to "yellow."

3. Add any additional CSS rules to experiment with different colors and
properties.

4. Save both the HTML and CSS files.

5. Open the HTML file in a web browser to view the webpage with the applied
color styles.

By completing this task, you'll practice using CSS to apply colors to HTML
elements, helping you understand how to control the visual appearance of web
content.

Code html
<!DOCTYPE html>
<html>
<head>
<title>CSS Colors Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Welcome to CSS Colors</h1>
 <p>This is a sample text with various colors.</p>
</body>
</html>
Code css:_
h1 {
color: blue;
}

p{
background-color: lightgray;
}

Question no 8
CSS Backgrounds
Answer
**CSS Backgrounds** refer to the CSS properties and techniques
used to set and control the background styling of HTML elements. Backgrounds
can include colors, images, patterns, and other visual elements that enhance the
appearance of a webpage. Let's explore CSS backgrounds with multiple-choice
questions (MCQs) and a practical task.

**Multiple-Choice Questions (MCQs) with Correct Answers Marked:**

1. In CSS, which property is used to set the background color of an HTML

element?
 a) `text-color`
b) `background-color` **(Correct)**
c) `color`
d) `font-color`

2. What is the primary purpose of using background images in CSS?

a) To define the structure of a webpage.
b) To set the text color of an element.
c) To enhance the visual appearance of elements by adding images as
backgrounds. **(Correct)**
d) To create hyperlinks.

3. How can you specify a background image in CSS?

a) Using the `background` property followed by an image URL.
b) By using the `image` property.
c) By applying the `url()` function to the `src` property. **(Correct)**
d) By embedding the image directly in the HTML file.

4. Which CSS property is used to control how a background image is repeated or

positioned?
a) `background-image`
b) `background-size`
c) `background-repeat` **(Correct)**
d) `background-color`
5. What does the `background-size` property in CSS determine?
a) The color of the background.
b) The size of the text font.
c) The size and scaling of the background image. **(Correct)**
d) The padding around an element.

**Practical Task: Apply CSS Backgrounds**

Create an HTML document and an external CSS file with the following content:

**HTML Document (`index.html`):**

```html
<!DOCTYPE html>
<html>
<head>
<title>CSS Backgrounds Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Welcome to CSS Backgrounds</h1>
<p>This is a sample text with various background styles.</p>
</body>
</html>
```
**CSS Stylesheet (`styles.css`):**
```css
/* Set the background color of the body element to light gray */
body {
background-color: lightgray;
}

/* Set a background image for the h1 element */

h1 {
background-image: url('background.jpg');
background-repeat: no-repeat;
background-size: cover;
color: white;
padding: 20px;
text-align: center;
}

/* Add your own CSS rules to experiment with backgrounds */

```

1. In the CSS file, set the background image of the `<h1>` element to an image of
your choice. You can use a local image file or provide a valid URL to an image on
the web.
2. Adjust the `background-repeat` and `background-size` properties for the
`<h1>` element to control how the background image is displayed.

3. Add any additional CSS rules to experiment with different background colors,
images, or properties.

4. Save both the HTML and CSS files.

5. Open the HTML file in a web browser to view the webpage with the applied
background styles.

Question no 9
CSS Borders
Answer
**CSS Borders** refer to the CSS properties and
techniques used to define and style the borders of HTML elements. Borders can
be applied to various HTML elements such as divs, paragraphs, images, and
more. CSS allows you to control the border width, color, style, and radius, giving
you flexibility in creating visually appealing designs. Let's explore CSS borders
with multiple-choice questions (MCQs) and a practical task.

**Multiple-Choice Questions (MCQs) with Correct Answers Marked:**

1. In CSS, which property is used to set the color of an element's border?

a) `border-color` **(Correct)**
b) `line-color`
c) `border-style`
 d) `border-width`

2. Which CSS property controls the width of an element's border?

a) `border-color`
b) `border-style`
c) `border-width` **(Correct)**
d) `border-radius`

3. What does the `border-style` property determine in CSS?

a) The background color of an element.
b) The color of the border.
c) The style or pattern of the border, such as solid, dashed, or dotted.
**(Correct)**
d) The width of the border.

4. Which value of the `border-radius` property creates rounded corners for an

element?
a) `square`
b) `circle`
c) `round` **(Correct)**
d) `curved`

5. How can you apply a border to all four sides of an element simultaneously in
CSS?
a) Use the `border` property followed by the desired width, style, and color.
**(Correct)**
 b) Set the `border-top`, `border-right`, `border-bottom`, and `border-left`
properties separately.
c) Use the `border-all` property.
d) It's not possible to apply a border to all sides at once.

**Practical Task: Apply CSS Borders**

Create an HTML document and an external CSS file with the following content:

**HTML Document (`index.html`):**

```html
<!DOCTYPE html>
<html>
<head>
<title>CSS Borders Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="box">
<p>This is a sample box with borders.</p>
</div>
</body>
</html>
```
**CSS Stylesheet (`styles.css`):**
```css
/* Style the div with class "box" */
.box {
width: 300px;
height: 200px;
background-color: lightgray;
border: 3px solid blue; /* Apply a blue border with a width of 3 pixels */
border-radius: 15px; /* Add rounded corners */
padding: 20px;
}

/* Add your own CSS rules to experiment with borders */

```

1. In the CSS file, set the border color of the `.box` element to a color of your
choice.

2. Adjust the border style of the `.box` element (e.g., `dashed`, `dotted`,
`double`) and experiment with different styles.

3. Change the border width to create a thicker or thinner border.

4. Modify the `border-radius` property to control the roundness of the corners.

5. Add any additional CSS rules to experiment with different border properties
and styles.

6. Save both the HTML and CSS files.

7. Open the HTML file in a web browser to view the webpage with the applied
border styles.

Question no 10
CSS Margins
Answer
**CSS Margins** are the CSS properties that control the space around
the outside of an HTML element, creating spacing between the element and its
surrounding elements. Margins can be used to add space between elements,
control the layout of web pages, and create visually appealing designs. Let's
explore CSS margins with multiple-choice questions (MCQs) and a practical task.

**Multiple-Choice Questions (MCQs) with Correct Answers Marked:**

1. In CSS, which property is used to control the space outside of an element,

creating margins?
a) `padding`
b) `spacing`
c) `border`
d) `margin` **(Correct)**

2. What is the purpose of using margins in CSS?

 a) To add space between the content and the element's border.
b) To create space between elements and control their layout. **(Correct)**
c) To define the background color of an element.
d) To set the width of an element's border.

3. How can you set margins on all sides (top, right, bottom, left) of an element
simultaneously in CSS?
a) Use the `margin` property and specify a single value. **(Correct)**
b) Set `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`
properties individually.
c) Use the `spacing` property.
d) Margins can only be applied to specific sides, not all at once.

4. What is the default value of the `margin` property in CSS?

a) `0`
b) `auto`
c) `1rem`
d) `initial` **(Correct)**

5. In CSS, what happens when you set a negative margin value for an element?
a) The element's content expands.
b) The element is hidden from view.
c) The element overlaps with neighboring elements. **(Correct)**
d) The element's border becomes thicker.
**Practical Task: Apply CSS Margins**

Create an HTML document and an external CSS file with the following content:

**HTML Document (`index.html`):**

```html
<!DOCTYPE html>
<html>
<head>
<title>CSS Margins Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="box">
<p>This is a sample box with margins.</p>
</div>
</body>
</html>
```

**CSS Stylesheet (`styles.css`):**

```css
/* Style the div with class "box" */
.box {
 width: 300px;
height: 200px;
background-color: lightgray;
border: 3px solid blue;
margin: 20px; /* Apply a 20px margin to all sides of the box */
padding: 20px;
}

/* Add your own CSS rules to experiment with margins */

```

1. In the CSS file, adjust the `margin` property of the `.box` element to
experiment with different margin values. Observe the effect on the spacing
around the element.

2. Add additional CSS rules to create margins for other elements or customize
the margins further.

3. Save both the HTML and CSS files.

4. Open the HTML file in a web browser to view the webpage with the applied
margin styles.

QUESTION NO 11
CSS Padding
 Answer
**CSS Padding** refers to the CSS properties that control the
space between the content of an HTML element and its border. Padding creates
space inside an element, allowing you to control the distance between the
content and the element's edges. It is commonly used for adding space around
text and other content within an element. Let's explore CSS padding with
multiple-choice questions (MCQs) and a practical task.

**Multiple-Choice Questions (MCQs) with Correct Answers Marked:**

1. In CSS, which property is used to control the space between the content of an
element and its border, creating padding?
a) `margin`
b) `spacing`
c) `border`
d) `padding` **(Correct)**

2. What is the primary purpose of using padding in CSS?

a) To add space between elements and control their layout.
b) To define the background color of an element.
c) To set the width of an element's border.
d) To create space around an element's content. **(Correct)**

3. How can you set padding on all sides (top, right, bottom, left) of an element
simultaneously in CSS?
a) Use the `padding` property and specify a single value. **(Correct)**
 b) Set `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`
properties individually.
c) Use the `spacing` property.
d) Padding can only be applied to specific sides, not all at once.

4. What is the default value of the `padding` property in CSS?

a) `0`
b) `auto`
c) `1rem`
d) `initial` **(Correct)**

5. In CSS, what happens when you set a negative padding value for an element?
a) The element's content expands.
b) The element is hidden from view.
c) The content overflows the element's borders. **(Correct)**
d) The element's border becomes thicker.

**Practical Task: Apply CSS Padding**

Create an HTML document and an external CSS file with the following content:

**HTML Document (`index.html`):**

```html
<!DOCTYPE html>
<html>
<head>
<title>CSS Padding Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="box">
<p>This is a sample box with padding.</p>
</div>
</body>
</html>
```

**CSS Stylesheet (`styles.css`):**

```css
/* Style the div with class "box" */
.box {
width: 300px;
height: 200px;
background-color: lightgray;
border: 3px solid blue;
padding: 20px; /* Apply a 20px padding to all sides of the box */
margin: 20px;
}
/* Add your own CSS rules to experiment with padding */
```

1. In the CSS file, adjust the `padding` property of the `.box` element to
experiment with different padding values. Observe the effect on the spacing
between the content and the element's edges.

2. Add additional CSS rules to create padding for other elements or customize
the padding further.

3. Save both the HTML and CSS files.

4. Open the HTML file in a web browser to view the webpage with the applied
padding styles.

Question no 12
CSS Height/Width
Answer
**CSS Height and Width** refer to the CSS properties used
to control the dimensions of HTML elements. These properties allow you to
specify the height and width of elements, defining how much space they occupy
within the web page layout. Let's explore CSS height and width with multiple-
choice questions (MCQs) and a practical task.

**Multiple-Choice Questions (MCQs) with Correct Answers Marked:**

1. In CSS, which property is used to set the height of an HTML element?

 a) `dimension`
b) `size`
c) `height` **(Correct)**
d) `length`

2. What does the CSS `width` property control for an element?

a) The font size of the element's content.
b) The color of the element's background.
c) The width or horizontal dimension of the element. **(Correct)**
d) The element's margin.

3. How can you specify the height and width of an element in CSS?
a) Use the `dimensions` property.
b) Set the `size` property.
c) Use the `height` and `width` properties separately. **(Correct)**
d) Specify the dimensions using the `dimension` attribute in the HTML.

4. What is the default unit of measurement for the `width` and `height`
properties in CSS?
a) Pixels (px)
b) Inches (in)
c) Centimeters (cm)
d) Auto (auto) **(Correct)**
5. In CSS, how can you make an element automatically adjust its width to fit the
available space within its parent container?
a) By setting a fixed width in pixels.
b) By using the `width` property with the value `auto`. **(Correct)**
c) By applying a percentage width relative to the parent container.
d) It's not possible to make an element adjust its width automatically.

**Practical Task: Apply CSS Height and Width**

Create an HTML document and an external CSS file with the following content:

**HTML Document (`index.html`):**

```html
<!DOCTYPE html>
<html>
<head>
<title>CSS Height and Width Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="box">
<p>This is a sample box with specified dimensions.</p>
</div>
</body>
</html>
```

**CSS Stylesheet (`styles.css`):**

```css
/* Style the div with class "box" */
.box {
width: 300px; /* Set the width to 300 pixels */
height: 200px; /* Set the height to 200 pixels */
background-color: lightgray;
border: 3px solid blue;
padding: 20px;
margin: 20px;
}

/* Add your own CSS rules to experiment with height and width */
```

1. In the CSS file, adjust the `width` and `height` properties of the `.box` element
to experiment with different dimensions. Observe the effect on the size of the
element.

2. Add additional CSS rules to specify dimensions for other elements or

customize the dimensions further.

3. Save both the HTML and CSS files.

4. Open the HTML file in a web browser to view the webpage with the applied
height and width styles.

Question no 14
CSS Lists
Answer
**CSS Height and Width** refer to the CSS properties used to
control the dimensions of HTML elements. These properties allow you to specify
the height and width of elements, defining how much space they occupy within
the web page layout. Let's explore CSS height and width with multiple-choice
questions (MCQs) and a practical task.

**Multiple-Choice Questions (MCQs) with Correct Answers Marked:**

1. In CSS, which property is used to set the height of an HTML element?

a) `dimension`
b) `size`
c) `height` **(Correct)**
d) `length`

2. What does the CSS `width` property control for an element?

a) The font size of the element's content.
b) The color of the element's background.
c) The width or horizontal dimension of the element. **(Correct)**
d) The element's margin.
3. How can you specify the height and width of an element in CSS?
a) Use the `dimensions` property.
b) Set the `size` property.
c) Use the `height` and `width` properties separately. **(Correct)**
d) Specify the dimensions using the `dimension` attribute in the HTML.

4. What is the default unit of measurement for the `width` and `height`
properties in CSS?
a) Pixels (px)
b) Inches (in)
c) Centimeters (cm)
d) Auto (auto) **(Correct)**

5. In CSS, how can you make an element automatically adjust its width to fit the
available space within its parent container?
a) By setting a fixed width in pixels.
b) By using the `width` property with the value `auto`. **(Correct)**
c) By applying a percentage width relative to the parent container.
d) It's not possible to make an element adjust its width automatically.

**Practical Task: Apply CSS Height and Width**

Create an HTML document and an external CSS file with the following content:
**HTML Document (`index.html`):**
```html
<!DOCTYPE html>
<html>
<head>
<title>CSS Height and Width Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="box">
<p>This is a sample box with specified dimensions.</p>
</div>
</body>
</html>
```

**CSS Stylesheet (`styles.css`):**

```css
/* Style the div with class "box" */
.box {
width: 300px; /* Set the width to 300 pixels */
height: 200px; /* Set the height to 200 pixels */
background-color: lightgray;
border: 3px solid blue;
 padding: 20px;
margin: 20px;
}

/* Add your own CSS rules to experiment with height and width */
```

1. In the CSS file, adjust the `width` and `height` properties of the `.box` element
to experiment with different dimensions. Observe the effect on the size of the
element.

2. Add additional CSS rules to specify dimensions for other elements or

customize the dimensions further.

3. Save both the HTML and CSS files.

4. Open the HTML file in a web browser to view the webpage with the applied
height and width styles.

Question no 15
CSS Tables
Answer
**CSS Tables** refer to the CSS properties and techniques used to
style HTML tables. HTML tables are used to organize and display data in rows
and columns, and CSS allows you to control their appearance, layout, spacing,
borders, and more. Let's explore CSS tables with multiple-choice questions
(MCQs) and a practical task.
**Multiple-Choice Questions (MCQs) with Correct Answers Marked:**

1. In HTML, what element is used to create tables?

a) `<div>`
b) `<table>` **(Correct)**
c) `<list>`
d) `<row>`

2. Which CSS property is used to set the border spacing between cells in a table?
a) `cell-spacing`
b) `border-spacing` **(Correct)**
c) `cell-margin`
d) `border-margin`

3. What is the purpose of the CSS `border-collapse` property for tables?

a) To control the overall width of the table.
b) To collapse the borders between adjacent table cells into a single border.
**(Correct)**
c) To set the background color of the table.
d) To hide the table from view.

4. Which CSS property is used to set the background color for table rows or
table cells?
a) `table-background-color`
 b) `row-background-color`
c) `cell-background-color`
d) `background-color` **(Correct)**

5. How can you center-align the content of a table cell horizontally using CSS?
a) Use the `text-align` property with the value `center` on the `td` or `th`
element. **(Correct)**
b) Apply the `center-content` class to the cell.
c) Use the `horizontal-align` property.
d) It's not possible to center-align table cell content.

**Practical Task: Apply CSS Table Styles**

Create an HTML document containing a table and an external CSS file to style
the table. Here's the starting code:

**HTML Document (`index.html`):**

```html
<!DOCTYPE html>
<html>
<head>
<title>CSS Tables Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
 <h1>Sample Table</h1>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</table>
</body>
</html>
```

**CSS Stylesheet (`styles.css`):**

```css
/* Style the table */
table {
width: 100%; /* Make the table width 100% of its container */
border-collapse: collapse; /* Collapse cell borders into a single border */
margin: 20px; /* Add margin for spacing */
}

/* Style table headers (th) */

th {
background-color: lightblue; /* Set background color */
text-align: center; /* Center-align text */
padding: 10px; /* Add padding for spacing */
}

/* Style table cells (td) */

td {
background-color: lightgray; /* Set background color */
text-align: center; /* Center-align text */
padding: 10px; /* Add padding for spacing */
border: 1px solid black; /* Add cell borders */
}

/* Add your own CSS rules to further style the table */

```
1. In the CSS file, experiment with different values for the `border-collapse`
property to observe how it affects the appearance of table borders.

2. Adjust the `background-color`, `text-align`, `padding`, and `border` properties

for both table headers (`th`) and table cells (`td`) to customize their styling.

3. Add any additional CSS rules to further style the table, rows, or individual
cells as desired.

4. Save both the HTML and CSS files.

5. Open the HTML file in a web browser to view the webpage with the applied
table styles.

Question no 16
CSS Display
Answer
**CSS Display** is a CSS property that controls how an HTML
element is rendered or displayed on a web page. It determines the type of box
model used for an element, which affects its layout and positioning. CSS Display
allows you to change elements from their default block-level or inline behavior
to create different layouts and structures. Let's explore CSS Display with
multiple-choice questions (MCQs) and a practical task.

**Multiple-Choice Questions (MCQs) with Correct Answers Marked:**

1. In CSS, what is the default display value for most HTML elements?
a) `block`
b) `inline` **(Correct)**
c) `none`
d) `table`

2. What does the CSS `display` property control for an element?

a) The element's background color.
b) The element's text alignment.
c) The type of box used for layout and positioning. **(Correct)**
d) The element's font size.

3. How can you make an element behave like a block-level element in CSS?
a) Use the `display: block;` property value. **(Correct)**
b) Apply the `block` class to the element.
c) Set the `block-element` property to `true`.
d) Elements cannot be made to behave like block-level elements.

4. Which `display` property value is used to hide an element from the layout
without affecting its existence in the DOM?
a) `block`
b) `inline`
c) `none` **(Correct)**
d) `hidden`
5. What is the purpose of the CSS `display: inline-block;` property value?
a) It creates a block-level element with inline characteristics.
b) It hides the element from view.
c) It allows elements to be displayed inline while maintaining block-level
characteristics, such as setting width and height. **(Correct)**
d) It vertically aligns the element's content.

**Practical Task: Apply CSS Display Property**

Create an HTML document with multiple elements and use an external CSS file
to manipulate their display behavior. Here's the starting code:

**HTML Document (`index.html`):**

```html
<!DOCTYPE html>
<html>
<head>
<title>CSS Display Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Display Property Example</h1>
<div class="block">Block-level element</div>
<span class="inline">Inline element</span>
<div class="none">This element will be hidden.</div>
 <div class="inline-block">Inline-block element</div>
</body>
</html>
```

**CSS Stylesheet (`styles.css`):**

```css
/* Style the block-level element */
.block {
display: block; /* Set to block-level */
background-color: lightblue;
padding: 10px;
margin: 10px;
}

/* Style the inline element */

.inline {
display: inline; /* Set to inline */
background-color: lightgreen;
padding: 5px;
margin: 5px;
}

/* Hide the element with display: none */

.none {
display: none; /* Hide the element */
}

/* Style the inline-block element */

.inline-block {
display: inline-block; /* Set to inline-block */
background-color: lightgray;
padding: 8px;
margin: 8px;
}
```

1. In the CSS file, experiment with different `display` property values (`block`,
`inline`, `none`, `inline-block`) for each of the elements in the HTML document.

2. Observe how the display property affects the layout and positioning of each
element.

3. Adjust other CSS properties like `background-color`, `padding`, and `margin`

to see how they interact with the different display values.

4. Save both the HTML and CSS files.

5. Open the HTML file in a web browser to view the webpage with the applied
display property styles.
By completing this task, you'll practice using CSS to control the display behavior
of HTML elements, allowing you to create various layouts and structures in your
web designs.

Question no 18
CSS Float
Answer

**CSS Float** is a CSS property that controls the positioning and

layout of elements within a web page. It allows elements to be moved to the
left or right, and content can wrap around them. Floats are commonly used for
creating layouts where text or other content should flow around images or
other elements. Let's explore CSS Float with multiple-choice questions (MCQs)
and a practical task.

**Multiple-Choice Questions (MCQs) with Correct Answers Marked:**

1. What is the primary purpose of the CSS `float` property?

a) To change the font size of an element.
b) To control the text alignment within an element.
c) To position elements to the left or right and allow content to wrap around
them. **(Correct)**
d) To hide elements from view.

2. Which values can the `float` property have in CSS?

a) `left`, `right`, `center`
 b) `inline`, `block`, `none`
c) `left`, `right`, `none`, `inherit` **(Correct)**
d) `top`, `bottom`, `middle`

3. What happens to elements that are floated to the left or right?

a) They become hidden from view.
b) They stack on top of each other.
c) They are moved to the specified side, and content flows around them.
**(Correct)**
d) They expand to fill the entire width of the container.

4. How can you clear floats in CSS to prevent content from wrapping around
them?
a) Use the `clear` property with a value of `center`.
b) Add extra padding to the floated elements.
c) Use the `clear` property with values like `left`, `right`, or `both`.
**(Correct)**
d) Clearing floats is not possible in CSS.

5. What is a common use case for the CSS `float` property?

a) Changing text color.
b) Centering elements within a container.
c) Creating text wrapping around images or other elements. **(Correct)**
d) Applying background colors to elements.
**Practical Task: Apply CSS Float**

Create an HTML document that includes multiple elements and use the CSS
`float` property to control their positioning. Here's a simple example:

**HTML Document (`index.html`):**

```html
<!DOCTYPE html>
<html>
<head>
<title>CSS Float Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Float Example</h1>
<div class="left-float">
<img src="left-image.jpg" alt="Left-Floated Image">
<p>This text floats to the left of the image.</p>
</div>

<div class="right-float">
<p>This text floats to the right of the image.</p>
<img src="right-image.jpg" alt="Right-Floated Image">
</div>
</body>
</html>
```

**CSS Stylesheet (`styles.css`):**

```css
/* Style the left-floated element */
.left-float {
float: left; /* Float to the left */
width: 50%; /* Take up half of the container's width */
}

/* Style the right-floated element */

.right-float {
float: right; /* Float to the right */
width: 50%; /* Take up half of the container's width */
}

/* Clear floats to prevent content from wrapping around them */

.clear-float {
clear: both; /* Clear both left and right floats */
}
```

1. In the CSS file, experiment with different values for the `float` property (`left`,
`right`) for each of the elements in the HTML document.
2. Observe how the `float` property affects the layout and positioning of each
element.

3. Add the `.clear-float` class to any additional elements that need to clear
floats.

4. Save both the HTML and CSS files.

5. Open the HTML file in a web browser to view the webpage with the applied
float property styles.