NEW
Font size
WorksheetsHTML & CSS Coding Questions
Total questions: 30
Worksheet time: 15mins
Which of the following HTML codes creates a basic page with a heading, a paragraph, and a horizontal rule?
Heading
Paragraph
Heading
Paragraph
Heading
Paragraph
Which HTML code creates a navigation bar with three links: Home, About, and Contact?
Which HTML code correctly inserts an image into a page, adds alternative text, and centers the image using HTML (not CSS)?




Which HTML code correctly creates a table with 3 columns, 4 rows, a table header, and a caption?
| Header1 | Header2 | Header3 |
|---|---|---|
| Row1Col1 | Row1Col2 | Row1Col3 |
| Row2Col1 | Row2Col2 | Row2Col3 |
| Row3Col1 | Row3Col2 | Row3Col3 |
| Row4Col1 | Row4Col2 | Row4Col3 |
| Header1 | Header2 | Header3 |
|---|---|---|
| Row1Col1 | Row1Col2 | Row1Col3 |
| Row2Col1 | Row2Col2 | Row2Col3 |
| Row3Col1 | Row3Col2 | Row3Col3 |
| Header1 | Header2 |
|---|---|
| Row1Col1 | Row1Col2 |
| Row2Col1 | Row2Col2 |
| Row3Col1 | Row3Col2 |
| Row4Col1 | Row4Col2 |
| Header1 | Header2 | Header3 |
|---|---|---|
| Row1Col1 | Row1Col2 | Row1Col3 |
| Row2Col1 | Row2Col2 | Row2Col3 |
Which of the following best describes how to present your top 3 favorite movies and foods as requested in the question?
Create an ordered list for movies and an unordered list for foods.
Create two unordered lists: one for movies and one for foods.
Create two ordered lists: one for movies and one for foods.
Create a paragraph describing your favorite movies and foods.
Which of the following elements should be included in a form as described: a name field, an email field, and a submit button?
Name field, email field, submit button
Name field, password field, reset button
Username field, email field, cancel button
Name field, phone number field, submit button
Embed a YouTube video into a webpage using an iframe.
A page should use which of the following heading levels to include all six types?
h1–h6
h1–h5
h2–h6
h1–h4
Which of the following describes a form with a dropdown list of colors and a checkbox labeled 'Subscribe'?
A form with a dropdown list of colors and a checkbox labeled 'Subscribe'.
A form with a text input for colors and a radio button for 'Subscribe'.
A form with a dropdown list of colors and a button labeled 'Subscribe'.
A form with a dropdown list of colors and a checkbox labeled 'Unsubscribe'.
Which semantic HTML tags should be used to create a simple page layout?
Select the correct HTML code to create a link that opens in a new tab using target="_blank".
Which of the following is an example of a definition list with at least 3 terms and definitions?
- HTML
- HyperText Markup Language
- CSS
- Cascading Style Sheets
- JS
- JavaScript
- HTML
- CSS
- JS
- HTML
- CSS
- JS
| HTML | CSS | JS |
Select the correct HTML code to add an audio file to a page using the audio tag with controls.
Select your preferred programming language from the options below.
Python
JavaScript
Ruby
C++
Select the correct HTML structure for a simple blog post using
Style a heading to be centered, blue, and uppercase.
text-align: center; color: blue; text-transform: uppercase;
text-align: left; color: red; text-transform: lowercase;
text-align: right; color: green; text-transform: capitalize;
text-align: center; color: black; text-transform: lowercase;
To create a layout using Flexbox where three boxes are aligned in a row with equal spacing, which CSS property and value should be used?
justify-content: space-between;
align-items: center;
flex-direction: column;
justify-content: flex-end;
Apply a background image to the entire webpage and make it cover the full screen.
Use CSS: body { background-image: url('image.jpg'); background-size: cover; }
Use CSS: body { background-image: url('image.jpg'); background-repeat: repeat; }
Use CSS: body { background-image: url('image.jpg'); background-size: contain; }
Use CSS: body { background-image: url('image.jpg'); background-attachment: fixed; }
Style a button so that it changes color on hover using the :hover selector.
button:hover { background-color: blue; }
button:active { background-color: blue; }
button:focus { background-color: blue; }
button:visited { background-color: blue; }
Select the correct CSS class that adds a border, padding, and rounded corners to an element.
.box { border: 1px solid #000; padding: 10px; border-radius: 8px; }
.box { border: none; padding: 0; border-radius: 0; }
.box { border: 1px dashed #000; margin: 10px; border-radius: 0; }
.box { border: 2px dotted #000; padding: 5px; border-radius: 0; }
Use CSS Grid to create a 3-column layout.
display: grid; grid-template-columns: 1fr 1fr 1fr;
display: flex; flex-direction: column;
display: grid; grid-template-rows: 1fr 1fr 1fr;
display: block; column-count: 3;
To make a navigation bar horizontal, which CSS property can be used?
display: flex;
display: block;
float: left;
position: absolute;
Which CSS properties are essential to create a card UI with shadow, padding, and a width limit (e.g., 300px)?
box-shadow, padding, max-width
border-radius, margin, min-width
background-color, float, width
display: flex, gap, min-height
Style an image to be circular using border-radius.
border-radius: 50%;
border-radius: 100px;
border-radius: 0;
border-radius: 10%;
A responsive webpage should have text size that adjusts using which of the following relative units?
em, rem, %
px, pt, in
cm, mm, px
vh, vw, px
Explain how to create animations using @keyframes to move a box from left to right.
Use @keyframes to define the movement from left to right and apply it to the box with the animation property.
Use @keyframes to change the box color and apply it with the transition property.
Use @keyframes to rotate the box and apply it with the animation property.
Use @keyframes to move the box from top to bottom and apply it with the animation property.
Which of the following describes the correct steps to use a Google Font by linking it in HTML and applying it to the body text?
Add the Google Font link in the
section and set the font-family in the body CSS.Add the Google Font link in the
section and set the font-family in theDownload the Google Font and use it directly in the
tag without linking.Use the Google Font link in a
