NEW
Font size
WorksheetsHTML and CSS Review
Total questions: 20
Worksheet time: 20mins
Which tag is the most appropriate for an independent, self-contained piece of content like a blog post or a news article?
<div>
<section>
<article>
<aside>
When creating a link that opens in a new tab (target="_blank"), which attribute is vital for security and performance?
alt="new"
title="external"
rel="noopener"
type="external"
What is the primary purpose of the <label> tag's for attribute?
To style the text differently.
To programmatically link the label to a specific input id.
To provide a tooltip for the user.
To indicate the language of the form.
Which HTTP method should be used in a <form> when sending sensitive data like a password?
GET
POST
PUT
SEND
Which of the following is a "void element" (self-closing and has no closing tag)?
<a>
<p>
<img>
<form>
Which tag should be used to define a thematic grouping of content, typically with a heading?
<span>
<section>
<article>
main>
What does the <meta name="viewport" content="width=device-width"> tag achieve?
It makes the website faster.
It ensures the site renders correctly on mobile devices.
It defines the height of the browser window.
It is used for SEO keywords.
Why is using <br> multiple times to create vertical spacing considered bad practice?
It breaks the HTML structure.
Browsers ignore more than one <br>.
Spacing should be handled by CSS margins/padding for better control.
It prevents the page from loading.
Which list tag is best suited for a "Glossary" or "Dictionary" style layout?
<ul>
<ol>
<dl>
<li>
What is the "root" element of every HTML document?
<!DOCTYPE html>
<html>
<head>
<body>
If you set box-sizing: border-box;, what happens when you add padding to an element?
The element gets wider.
The padding is included within the defined width.
he padding is added outside the border.
The border disappears.
Which selector has the highest specificity (will "win" over the others if applied)?
p { color: red; }
.text { color: blue; }
#title { color: green; }
body p { color: yellow; }
Which unit is relative to the font size of the root element (usually <html>)?
px
%
em
rem
What is the main difference between display: inline and display: inline-block?
inline allows for a background color.
inline-block allows you to set a width and height.
inline starts on a new line.
There is no difference.
Why does position: sticky; might fail to work on a sidebar?
The sidebar is too tall.
A parent element has overflow: hidden; or overflow: auto;.
he browser doesn't support it.
It only works with images.
How do you horizontally center a block-level element with a fixed width?
text-align: center;
float: center;
margin: 0 auto;
padding: 50%;
Which property hides an element but still allows it to take up space in the layout?
display: none;
visibility: hidden;
opacity: 1;
osition: absolute;
In Flexbox, which property controls an item's ability to grow if there is extra space?
flex-basis
flex-shrink
flex-grow
justify-content
Why does a child with z-index: 999 might appear behind a sibling with z-index: 1?
z-index only goes up to 100.
The child element is not a <div>.
The elements belong to different stacking contexts.
z-index requires the float property.
Can the CSS display property be animated using CSS Transitions?
Yes, easily.
Yes, but only with display: block.
No, it is a binary switch and cannot be interpolated.
Only if you use JavaScript.
