HTML and CSS Learning Quizzes: Master Web Development Fundamentals

Question 1

In web development, HTML and CSS work together to create a complete web page. Describe their distinct roles and how they collaborate to achieve this.

Accepted Answer

HTML provides the structure and content, while CSS controls the appearance and layout.

Answer

CSS defines the structure and layout, while HTML adds interactivity and functionality.

Answer

HTML and CSS perform identical functions and can be used interchangeably.

Answer

CSS is responsible for the page's content, and HTML adds styling and functionality.

Question 2

In HTML, how do you correctly add the alt attribute to an image element?

Accepted Answer

Answer

Answer

Question 3

The CSS property 'display' primarily controls:

Accepted Answer

Layout of an element

Answer

Font size

Answer

Background color

Answer

Text color

Question 4

To apply styles specifically to mobile devices using CSS, which media query would you use?

Accepted Answer

@media (max-width: 480px)

Answer

@media screen

Answer

@media print

Answer

@media (min-width: 768px)

Question 5

Construct the correct HTML syntax to create a table with a header row and data rows:

Accepted Answer

Answer

Answer

Answer

Question 6

What is the primary advantage of using semantic HTML elements?

Accepted Answer

Improved accessibility for users with disabilities

Answer

Simplified CSS styling and maintenance

Answer

Enhanced search engine optimization

Answer

Reduced webpage load time

Question 7

Which CSS selector targets all elements with the class 'container'?

Accepted Answer

.container

Answer

#container

Answer

div.container

Answer

div#container

Question 8

In an HTML document, the 'head' element is primarily responsible for:

Accepted Answer

Defining the title and metadata

Answer

Containing the main content of the page

Answer

Specifying CSS styles

Answer

Providing navigation links

Question 9

Which CSS property allows you to control the transparency of an element?

Accepted Answer

opacity

Answer

visibility

Answer

transparent

Answer

fade

Question 10

What is the key difference between inline and external CSS?

Accepted Answer

Inline CSS is defined within HTML elements, while external CSS is stored in separate files

Answer

Inline CSS is more efficient, while external CSS is more organized

Answer

Inline CSS is only used for small styles, while external CSS is preferred for larger websites

Answer

There is no significant difference between inline and external CSS

Question 11

To create a responsive website using HTML and CSS, which approach is most effective?

Accepted Answer

Applying tailored styles for different screen sizes using media queries

Answer

Using a single CSS stylesheet for all devices

Answer

Relying solely on a JavaScript library for responsive design

Question 12

Which HTML element is used to create a hyperlink to another web page?

Accepted Answer

<a>

Answer

<b>

Answer

<p>

Answer

<div>

Question 13

Which CSS property is used to set the background color of an element?

Accepted Answer

background-color

Answer

background

Answer

color

Answer

fill

Question 14

Which of the following is a valid CSS selector for targeting a specific class?

Accepted Answer

.class

Answer

#id

Answer

p

Answer

all

Question 15

What is the primary purpose of the <head> element in HTML?

Accepted Answer

To contain metadata and information about the web page

Answer

To organize the content of the page

Answer

To style the page

Answer

To create a navigation menu

Question 16

What is the main role of the CSS box model?

Accepted Answer

To determine the size, margins, padding, and borders of individual elements

Answer

To define the overall layout of the webpage

Answer

To manage the flow of content on the page

Answer

To provide a way to animate elements

Question 17

Which HTML element is used to create a form for collecting user input?

Accepted Answer

<form>

Answer

<input>

Answer

Answer

<label>

Question 18

What is the purpose of the CSS display property?

Accepted Answer

To control the layout of an element

Answer

To determine the visibility of an element

Answer

To change the appearance of an element

Answer

To define the position of an element

Question 19

Which HTML code snippet creates a text input field with a placeholder and a maximum character limit of 50?

Accepted Answer

Answer

Answer

Question 20

When creating a link in HTML, which attribute determines where the linked content will open?

Accepted Answer

target

Answer

href

Answer

rel

Question 21

Which HTML element is primarily used to define the main content area of a web page?

Accepted Answer

<main>

Answer

Answer

<body>

Answer

Question 22

In CSS, what property is specifically used to modify the background color of an element?

Accepted Answer

background-color

Answer

fill

Answer

color

Answer

background

Question 23

Which CSS selector targets all elements with the class name 'example-class'?

Accepted Answer

.example-class

Answer

example-class

Answer

#example-class

Question 24

What is the primary purpose of the 'alt' attribute in an HTML image tag?

Accepted Answer

To provide alternative text that describes the image for accessibility purposes.

Answer

To specify the image's dimensions.

Answer

To define a link to another web page.

Question 25

Which HTML element is used to create a prominent heading?

Accepted Answer

<h1>

Answer

<h3>

Answer

<h2>

Answer

<title>

Question 26

In CSS, what does the 'float' property primarily achieve?

Accepted Answer

Positions an element to the left or right of its normal flow.

Answer

Changes the element's background color.

Answer

Adjusts the spacing around an element.

Question 27

Which HTML attribute is used to define the width of an image?

Accepted Answer

width

Answer

size

Answer

length

Answer

scale

Question 28

In CSS, what is the fundamental difference between 'em' and 'px' units?

Accepted Answer

An 'em' is relative to the font size, while a 'px' is absolute.

Answer

A 'px' is relative to the element's width.

Answer

An 'em' is larger than a 'px'.

Question 29

Which CSS property is used to create rounded corners around an element?

Accepted Answer

border-radius

Answer

border-style

Answer

border-shape

Answer

corner-radius

Question 30

What is the primary function of a 'media query' in CSS?

Accepted Answer

To apply styles conditionally based on specific criteria, such as screen size or device type.

Answer

To load external CSS files dynamically.

Answer

To create animations and transitions.