NEW
Font size
WorksheetsHTMLCSS
Total questions: 79
Worksheet time: 42mins
You want to hide an element completely so it does not take any space on the page. Which CSS should you use?
visibility: hidden;
opacity: 0;
display: none;
z-index: -1
An element should be invisible but still occupy space on the page. Which property will you use?
display: none;
opacity: 0;
visibility: hidden;
position: absolute;
You want two elements to appear on the same line. Which display property should you use?
block
inline
none
Hidden
You want an element to stay fixed at the top of the screen even while scrolling. What should you use?
position: absolute;
position: relative;
position: fixed;
position: static
You want to add space inside a button, between text and border. Which CSS property is required?
margin
padding
border
spacing
You want to add space between two boxes externally. Which property will you use?
padding
border
margin
outline
A paragraph text should appear in center alignment. Which CSS will work?
align: center;
text-align: center;
position: center;
float: center;
You want to change only the text color of a heading. Which property should be used?
background-color
font-style
color
text-style
You want to uniquely target one element using CSS. Which selector should be used?
Class selector
Universal selector
Group selector
ID selector
You want to apply same style to multiple elements. Which selector is best?
ID
Inline
Class
Attribute
You want a link to open in a new browser tab. What should you add?
new="_tab"
open="new"
target="_blank"
href="_blank"
You are creating a form and want hidden characters for password input. Which type is correct?
A. text
B. secure
C. hidden
D. password
You want to display an image on webpage. Which HTML tag is required?
A. <picture>
B. <img>
C. <image>
D. <src>
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. <span>
B. <caption>
C. <label>
D. <legend>
You want to show a numbered list of items. Which HTML structure is correct?
A. <ul>
B. <list>
C. <ol>
D. <dl>
You want to create a clickable button to submit form data. Which element is suitable?
A. <input type="submit">
B. <button>
C. Both A and B
D. <a>
You want to show text exactly as written including spaces and line breaks. Which tag is correct?
A. <code>
B. <pre>
C. <p>
D. <text>
You want to display tab title in browser. Where should it be written?
A. <body>
B. <header>
C. <head>
D. <meta>
You want to display alternative text if image fails to load. Which attribute is used?
A. title
B. alt
C. src
D. name
You want to write developer comments that do not appear on page. Which syntax is correct?
A. // comment
B. /* comment */
C. --
D. # comment
You want to arrange items in row or column easily. Which CSS model is best?
A. float
B. position
C. flexbox
D. inline
You want to round the corners of a card. Which property is required?
A. corner-radius
B. border-style
C. border-radius
D. curve
Multiple elements are overlapping. You want to control which appears on top. Which property helps?
A. layer
B. depth
C. z-index
D. order
You want to reduce visibility of an element without hiding it completely. Which property is used?
A. visibility
B. display
C. opacity
D. hidden
You want to apply background image to a section. Which property will be used?
A. image
B. background-image
C. bg-img
D. background-pic
Text should appear italic. Which CSS is correct?
A. font-weight
B. font-style: italic;
C. text-decoration
D. style: italic;
You want bullets removed from a list. Which CSS is correct?
A. list-style: none;
B. bullet: none;
C. ul-style: none;
D. display: none;
You want content not to overflow outside box. Which property handles this?
A. overflow
B. display
C. scroll
D. position
You want to center a div horizontally and vertically inside its parent container. Which CSS property combination will help?
A. float: center;
B. display: flex; justify-content: center; align-items: center;
C. position: absolute; left: 50%; top: 50%;
D. margin: auto;
You want scroll bar only when content overflows. Which value is correct?
A. hidden
B. visible
C. auto
D. none
You want an element to move relative to its original position. Which CSS position will you use?
A. static
B. absolute
C. relative
D. fixed
You want an element to be positioned relative to the browser window. Which position is correct?
A. relative
B. absolute
C. fixed
D. sticky
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. static
B. relative
C. absolute
D. fixed
You want a navigation bar to stick at the top while scrolling but only after reaching it. Which property is correct?
A. fixed
B. absolute
C. sticky
D. relative
You want to remove underline from a hyperlink. Which CSS should you apply?
A. font-style: none;
B. text-decoration: none;
C. link-decoration: none;
D. underline: false;
You want to change cursor to hand icon when hovering a button. Which property will you use?
A. mouse
B. pointer
C. cursor: pointer;
D. hover: hand;
You want to apply style only when user hovers over an element. Which selector is needed?
A. :active
B. :focus
C. :hover
D. :visited
You want to style an input field when user clicks inside it. Which pseudo-class is used?
A. :hover
B. :focus
C. :active
D. :checked
You want to apply same style to h1, h2, and h3 together. Which selector approach is correct?
A. h1 h2 h3
B. h1 + h2 + h3
C. h1, h2, h3
D. h1.h2.h3
You want all text inside a div to become uppercase. Which CSS property will help?
A. font-style
B. text-transform: uppercase;
C. text-decoration
D. letter-spacing
You want to make an image clickable and redirect to another page. What is the correct structure?
A. img inside p
B. img inside div
C. a inside img
D. img inside a tag
You want to take user email input with validation. Which input type should be used?
A. email
B. mail
C. text
D. address
You want to select only one option from multiple choices in a form. Which input type is required?
A. checkbox
B. radio
C. select
D. option
You want to group related radio buttons so only one can be selected. Which attribute must be same?
A. id
B. value
C. class
D. name
You want to show a dropdown list. Which HTML element is required?
A. select
B. dropdown
C. list
D. option
You want to display caption for a table. Which tag should be used?
title
head
caption
label
You want table heading text to appear bold and centered by default. Which tag is correct?
<td>
<tr>
<th>
<thead>
You want to merge two rows of a table cell. Which attribute is used?
colspan
rowspan
merge
combine
You want to embed an external website inside your page. Which HTML tag will you use?
frame
object
iframe
embed
You want to load CSS file from outside. Which tag is correct?
<style src="">
<css>
<link rel="stylesheet">
<script>
You want child elements to automatically adjust width inside a container. Which display model helps?
inline
block
flex
float
You want equal spacing between flex items. Which property is required?
align-items
justify-content: space-between
flex-direction
gap
You want items vertically centered inside a flex container. Which property should be used?
justify-content
text-align
align-items: center
vertical-align
You want to change the order of a flex item. Which property is used?
position
z-index
order
float
You want content to wrap into next line in flexbox. Which property is correct?
flex-wrap: wrap
wrap: true
flex-line
overflow: wrap
You want to add shadow around a box. Which property is correct?
text-shadow
box-shadow
shadow
border-shadow
You want to ensure a form field must be filled before submitting the form. Which HTML attribute should be used?
validate
required
placeholder
readonly
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?
display
position
overflow
visibility
You want CSS to apply to entire website globally. Which method is best?
Inline CSS
Internal CSS
External CSS
Attribute CSS
You want to include a link that allows users to download a file directly when clicked. Which attribute should be used?
href
download
target
rel
You want to display a tooltip when a user hovers over an element. Which HTML attribute is used?
title
alt
tooltip
hover
You want to add a checkbox that is selected by default. Which attribute should you add?
default
checked
selected
value
You want to restrict input to a number between 1 and 10 in a form. Which attributes will you use?
min and max
minonly
range
limit
You want to add a description under a form field for guidance. Which HTML tag is suitable?
<small>
<label>
<span>
<form-text>
You want to display an image that automatically adjusts its size according to screen width. Which CSS property is most useful?
width: 100px
width: auto
width: 100%
width: fit
You want a group of checkboxes where multiple options can be selected. Which input type should be used?
radio
checkbox
select
button
You want to define a section of a page that contains a heading and multiple paragraphs. Which HTML tag is most semantically correct?
<section>
<div>
<article>
<span>
You want to highlight certain words inside a paragraph with special importance. Which tag should be used?
<mark>
<strong>
<b>
<em>
You want to create a simple table row with three columns. Which HTML structure is correct?
<tr><td></td><td></td><td></td></tr>
<tr><th></th><th></th><th></th></tr>
<table><tr><td></td></tr></table>
<row><col></col></row>
You want a section to always remain at the bottom of the page. Which CSS position is suitable?
absolute
fixed
relative
sticky
You want to create a flexible layout where items automatically wrap to the next line if space is insufficient. Which CSS property is required?
flex-wrap: wrap
flex-direction: column
display: block
wrap:true
You want to make all links inside a navigation menu change color when hovered over. Which CSS selector is used?
a:hover
a:active
a:visited
a:focus
You want to apply a border only to the top of a box. Which CSS property is correct?
border
border-top
border-side-top
border-style-top
You want to display a line of text with a shadow effect. Which CSS property is needed?
text-shadow
box-shadow
shadow
font-shadow
You want a navigation bar where menu items are evenly spaced across the width. Which CSS property helps?
justify-content: space-between
align-items: center
text-align: justify
flex-direction: row
You want to make a div occupy exactly half of the parent container width, regardless of screen size. Which CSS units are best?
px
em
%
rem
You want a button to visually appear pressed when clicked. Which pseudo-class is used?
hover
active
focus
checked
You want to display a video on a webpage that starts automatically when the page loads. Which attribute is needed?
autoplay
play
start
controls
Which option correctly represents the components of the CSS Box Model (from inside to outside)?
A. Margin → Border → Padding → Content
B. Content → Padding → Border → Margin
C. Border → Margin → Padding → Content
D. Padding → Content → Margin → Border
