wayground logo

Free Printable Worksheets

NEW

Font size

S
M
L
XL
Worksheets

HTMLCSS

Total questions: 79

Worksheet time: 42mins

Name
Class
Date
1.
  1. You want to hide an element completely so it does not take any space on the page. Which CSS should you use?

a)
  1. visibility: hidden;

b)
  1. opacity: 0;

c)
  1. display: none;

d)

  1. z-index: -1

2.

An element should be invisible but still occupy space on the page. Which property will you use?

a)

display: none;

b)


opacity: 0;

c)

visibility: hidden;

d)


position: absolute;

3.

You want two elements to appear on the same line. Which display property should you use?

a)

block

b)


inline

c)

none

d)


Hidden

4.

You want an element to stay fixed at the top of the screen even while scrolling. What should you use?

a)

position: absolute;

b)

position: relative;

c)


position: fixed;

d)

position: static

5.

You want to add space inside a button, between text and border. Which CSS property is required?

a)

margin

b)

padding

c)

border

d)

spacing

6.

You want to add space between two boxes externally. Which property will you use?

a)


padding

b)


border

c)


margin

d)

outline

7.

A paragraph text should appear in center alignment. Which CSS will work?

a)

align: center;

b)

text-align: center;

c)

position: center;

d)

float: center;

8.

You want to change only the text color of a heading. Which property should be used?

a)

background-color

b)


font-style

c)


color

d)

text-style

9.

You want to uniquely target one element using CSS. Which selector should be used?

a)

Class selector

b)

Universal selector

c)

Group selector

d)

ID selector

10.

You want to apply same style to multiple elements. Which selector is best?

a)

ID

b)


Inline

c)

Class

d)

Attribute

11.

You want a link to open in a new browser tab. What should you add?

a)

new="_tab"

b)

open="new"

c)

target="_blank"

d)

href="_blank"

12.

You are creating a form and want hidden characters for password input. Which type is correct?

a)

A. text

b)

B. secure

c)

C. hidden

d)


D. password

13.

You want to display an image on webpage. Which HTML tag is required?

a)

A. <picture>

b)


B. <img>

c)

C. <image>

d)


D. <src>

14.

You want to add a text label for an input field so that clicking the text focuses the input. Which HTML tag should be used?

a)

A. <span>

b)

B. <caption>

c)

C. <label>

d)

D. <legend>

15.

You want to show a numbered list of items. Which HTML structure is correct?

a)

A. <ul>

b)

B. <list>

c)

C. <ol>

d)

D. <dl>

16.

You want to create a clickable button to submit form data. Which element is suitable?

a)


A. <input type="submit">

b)

B. <button>

c)

C. Both A and B

d)

D. <a>

17.

You want to show text exactly as written including spaces and line breaks. Which tag is correct?

a)

A. <code>

b)

B. <pre>

c)

C. <p>

d)

D. <text>

18.

You want to display tab title in browser. Where should it be written?

a)

A. <body>

b)

B. <header>

c)

C. <head>

d)

 D. <meta>

19.

You want to display alternative text if image fails to load. Which attribute is used?

a)

A. title

b)

B. alt

c)

C. src

d)

D. name

20.

You want to write developer comments that do not appear on page. Which syntax is correct?

a)

A. // comment

b)


B. /* comment */

c)


C. --

d)


D. # comment

21.

You want to arrange items in row or column easily. Which CSS model is best?

a)


A. float

b)


B. position

c)


C. flexbox

d)

D. inline

22.

You want to round the corners of a card. Which property is required?

a)

A. corner-radius

b)


B. border-style

c)


C. border-radius

d)

D. curve

23.
  1. Multiple elements are overlapping. You want to control which appears on top. Which property helps?

a)

  1. A. layer

b)

  1. B. depth

c)

  1. C. z-index

d)
  1. D. order

24.

You want to reduce visibility of an element without hiding it completely. Which property is used?

a)

A. visibility

b)

B. display

c)

C. opacity

d)

D. hidden

25.

You want to apply background image to a section. Which property will be used?

a)

A. image

b)

B. background-image

c)

C. bg-img

d)

D. background-pic

26.

Text should appear italic. Which CSS is correct?

a)

A. font-weight

b)

B. font-style: italic;

c)

C. text-decoration

d)

D. style: italic;

27.

You want bullets removed from a list. Which CSS is correct?

a)

A. list-style: none;

b)

B. bullet: none;

c)

C. ul-style: none;

d)

D. display: none;

28.

You want content not to overflow outside box. Which property handles this?

a)


A. overflow

b)

B. display

c)

C. scroll

d)

D. position

29.

You want to center a div horizontally and vertically inside its parent container. Which CSS property combination will help?

a)

A. float: center;

b)

B. display: flex; justify-content: center; align-items: center;

c)

C. position: absolute; left: 50%; top: 50%;

d)

D. margin: auto;

30.

You want scroll bar only when content overflows. Which value is correct?

a)

A. hidden

b)

B. visible

c)

C. auto

d)

D. none

31.

You want an element to move relative to its original position. Which CSS position will you use?

a)

A. static

b)

B. absolute

c)

C. relative

d)

D. fixed

32.

You want an element to be positioned relative to the browser window. Which position is correct?

a)

A. relative

b)

B. absolute

c)

C. fixed

d)

D. sticky

33.

You want to place an element exactly inside its parent using top and left values. Parent has position: relative. Which position should child use?

a)

A. static

b)

B. relative

c)

C. absolute

d)

D. fixed

34.

You want a navigation bar to stick at the top while scrolling but only after reaching it. Which property is correct?

a)

A. fixed

b)

B. absolute

c)

C. sticky

d)

D. relative

35.

You want to remove underline from a hyperlink. Which CSS should you apply?

a)

A. font-style: none;

b)

B. text-decoration: none;

c)

C. link-decoration: none;

d)

D. underline: false;

36.

You want to change cursor to hand icon when hovering a button. Which property will you use?

a)

A. mouse

b)

B. pointer

c)

C. cursor: pointer;

d)

D. hover: hand;

37.

You want to apply style only when user hovers over an element. Which selector is needed?

a)

A. :active

b)

B. :focus

c)

C. :hover

d)

D. :visited

38.
  1. You want to style an input field when user clicks inside it. Which pseudo-class is used?

a)
  1. A. :hover

b)
  1. B. :focus

c)
  1. C. :active

d)
  1. D. :checked

39.
  1. You want to apply same style to h1, h2, and h3 together. Which selector approach is correct?

a)
  1. A. h1 h2 h3

b)
  1. B. h1 + h2 + h3

c)

C. h1, h2, h3

d)
  1. D. h1.h2.h3

40.

You want all text inside a div to become uppercase. Which CSS property will help?

a)

A. font-style

b)


B. text-transform: uppercase;

c)

C. text-decoration

d)

D. letter-spacing

41.

You want to make an image clickable and redirect to another page. What is the correct structure?

a)

A. img inside p

b)

B. img inside div

c)

C. a inside img

d)

D. img inside a tag

42.

You want to take user email input with validation. Which input type should be used?

a)

A. email

b)

B. mail

c)

C. text

d)

D. address

43.

You want to select only one option from multiple choices in a form. Which input type is required?

a)

A. checkbox

b)

B. radio

c)

C. select

d)

D. option

44.

You want to group related radio buttons so only one can be selected. Which attribute must be same?

a)

A. id

b)

B. value

c)

C. class

d)

D. name

45.

You want to show a dropdown list. Which HTML element is required?

a)

A. select

b)

B. dropdown

c)

C. list

d)

D. option

46.

You want to display caption for a table. Which tag should be used?

a)

title

b)

head

c)

caption

d)

label

47.

You want table heading text to appear bold and centered by default. Which tag is correct?

a)

<td>

b)

<tr>

c)

<th>

d)

<thead>

48.

You want to merge two rows of a table cell. Which attribute is used?

a)

colspan

b)

rowspan

c)

merge

d)

combine

49.

You want to embed an external website inside your page. Which HTML tag will you use?

a)

frame

b)

object

c)

iframe

d)

embed

50.

You want to load CSS file from outside. Which tag is correct?

a)

<style src="">

b)

<css>

c)

<link rel="stylesheet">

d)

<script>

51.

You want child elements to automatically adjust width inside a container. Which display model helps?

a)

inline

b)

block

c)

flex

d)

float

52.

You want equal spacing between flex items. Which property is required?

a)

 align-items

b)

justify-content: space-between

c)

 flex-direction

d)

gap

53.

You want items vertically centered inside a flex container. Which property should be used?

a)

justify-content

b)

text-align

c)

align-items: center

d)

vertical-align

54.

You want to change the order of a flex item. Which property is used?

a)

position

b)

z-index

c)

order

d)

float

55.

You want content to wrap into next line in flexbox. Which property is correct?

a)

flex-wrap: wrap

b)

wrap: true

c)

flex-line

d)

overflow: wrap

56.

You want to add shadow around a box. Which property is correct?

a)

text-shadow

b)

box-shadow

c)

shadow

d)

border-shadow

57.

You want to ensure a form field must be filled before submitting the form. Which HTML attribute should be used?

a)

validate

b)

required

c)

placeholder

d)

readonly

58.

You want an element to remain within its container and not go outside even when its content is larger than the box. Which CSS property should be used to control this behavior?

a)

display

b)

position

c)

overflow

d)

visibility

59.

You want CSS to apply to entire website globally. Which method is best?

a)

 Inline CSS

b)

Internal CSS

c)

External CSS

d)

Attribute CSS

60.

You want to include a link that allows users to download a file directly when clicked. Which attribute should be used?

a)

href

b)

download

c)

target

d)

rel

61.

You want to display a tooltip when a user hovers over an element. Which HTML attribute is used?

a)

title

b)

alt

c)

tooltip

d)

hover

62.

You want to add a checkbox that is selected by default. Which attribute should you add?

a)

default

b)

checked

c)

selected

d)

value

63.

You want to restrict input to a number between 1 and 10 in a form. Which attributes will you use?

a)

min and max

b)

minonly

c)

range

d)

limit

64.

You want to add a description under a form field for guidance. Which HTML tag is suitable?

a)

<small>

b)

<label>

c)

<span>

d)

 <form-text>

65.

You want to display an image that automatically adjusts its size according to screen width. Which CSS property is most useful?

a)

width: 100px

b)

width: auto

c)

width: 100%

d)

width: fit

66.

You want a group of checkboxes where multiple options can be selected. Which input type should be used?

a)

radio

b)

checkbox

c)

select

d)

button

67.

You want to define a section of a page that contains a heading and multiple paragraphs. Which HTML tag is most semantically correct?

a)

<section>

b)

<div>

c)

<article>

d)

<span>

68.

You want to highlight certain words inside a paragraph with special importance. Which tag should be used?

a)

<mark>

b)

<strong>

c)

<b>

d)

<em>

69.

You want to create a simple table row with three columns. Which HTML structure is correct?

a)

<tr><td></td><td></td><td></td></tr>

b)

<tr><th></th><th></th><th></th></tr>

c)

<table><tr><td></td></tr></table>

d)

 <row><col></col></row>

70.

You want a section to always remain at the bottom of the page. Which CSS position is suitable?

a)

absolute

b)

fixed

c)

relative

d)

sticky

71.

You want to create a flexible layout where items automatically wrap to the next line if space is insufficient. Which CSS property is required?

a)

flex-wrap: wrap

b)

 flex-direction: column

c)

 display: block

d)

wrap:true

72.

You want to make all links inside a navigation menu change color when hovered over. Which CSS selector is used?

a)

a:hover

b)

a:active

c)

a:visited

d)

a:focus

73.
  1. You want to apply a border only to the top of a box. Which CSS property is correct?

a)

border

b)

border-top

c)

border-side-top

d)

border-style-top

74.

You want to display a line of text with a shadow effect. Which CSS property is needed?

a)

text-shadow

b)

box-shadow

c)

shadow

d)

font-shadow

75.

You want a navigation bar where menu items are evenly spaced across the width. Which CSS property helps?

a)

 justify-content: space-between

b)

align-items: center

c)

text-align: justify

d)

flex-direction: row

76.

You want to make a div occupy exactly half of the parent container width, regardless of screen size. Which CSS units are best?

a)

px

b)

em

c)

%

d)

rem

77.

You want a button to visually appear pressed when clicked. Which pseudo-class is used?

a)

hover

b)

active

c)

focus

d)

checked

78.

You want to display a video on a webpage that starts automatically when the page loads. Which attribute is needed?

a)

autoplay

b)

play

c)

start

d)

controls

79.

Which option correctly represents the components of the CSS Box Model (from inside to outside)?

a)

A. Margin → Border → Padding → Content

b)

B. Content → Padding → Border → Margin

c)

C. Border → Margin → Padding → Content

d)

D. Padding → Content → Margin → Border