Greetings readers, presenting you today, is the HTML CSS quiz for Web developers. This quiz contains 20 basic questions to test your HTML and CSS skills.
Any web developer or designer who has started working on HTML and CSS projects can try this quiz. It will not only help to improve basic understanding of HTML and CSS knowledge but also reveal those gaps that are hard to find.
WordPress developers working on projects like theme creation can also benefit by attempting this HTML CSS quiz. It can help the using CSS in an optimized way.
Also Read: 50 Latest JSP Interview Questions and Answers
Next, we will keep adding more interesting HTML5/CSS quizzes in the days to go. There you’ll see an extended version of the CSS quiz with questions having moderate to higher complexity levels.
However, if you like to get evaluated for JavaScript skills, don’t mind crawling through our JavaScript quiz for web developers.
So stay tuned for the next amazing CSS practice test. Now go ahead and see how you score in this quiz.
HTML CSS Quiz for Web Developers
logo { }",
"img { }",
".logo { }",
"#logo { }"
],
answer: 3
},
{
question: "3. Select paragraphs with class 'alert'?",
options: [
"#alert { }",
"alert { }",
".alert { }",
"p { }"
],
answer: 2
},
{
question: "4. Which property adds space outside elements?",
options: [
"margin",
"padding",
"border",
"outline"
],
answer: 0
},
{
question: "5. Which pseudo-class helps with tabbing?",
options: [
"a:link", "
a:active", "
a:focus", "
a:visited" ], answer: 2 }, { question: "6. Which property sets Roman numerals?", options: [ "
list-style-type:upper-roman;", "
list-type:roman;", "
list-style:roman-numerals;", "
list-style:roman;" ], answer: 0 }, { question: "7. Which property adds space inside borders?", options: [ "margin", "padding", "border-spacing", "outline" ], answer: 1 }, { question: "8. Largest HTML heading tag?", options: [ "
Head", "
H1", "
H6", "
Heading" ], answer: 1 }, { question: "9. Tag for a line break?", options: [ "
break", "
brbr", "
lb", "
br" ], answer: 3 }, { question: "10. Tag for bold text?", options: [ "
bold", "
b", "
bb", "
bo" ], answer: 1 }, { question: "11. Tag for italic text?", options: [ "
Italic", "
i", "
It", "
II" ], answer: 1 }, { question: "12. Correct syntax for a hyperlink?", options: [ "
<a url='site.com'>Link</a>", "
<a href='site.com'>Link</a>", "
<a>site.com</a>", "
<a name='site.com'>Link</a>" ], answer: 1 }, { question: "13. Correct syntax for an email link?", options: [ "
<a href='mail.email.com'>Email</a>", "
<a>Email</a>", "
<a href='email.com'>Email</a>", "
<a href='mailto:email.com'>Email</a>" ], answer: 3 }, { question: "14. Open a link in a new tab?", options: [ "
<a href='url' target='_blank'>Link</a>", "
<a href='url' new>Link</a>", "
<a href='url' target='new'>Link</a>", "
<a href='url' target='_window'>Link</a>" ], answer: 0 }, { question: "15. HTML Tag for a numbered list?", options: [ "
<ol></ol>", "
<dl></dl>", "
<ul></ul>", "
<list></list>" ], answer: 0 }, { question: "16. HTML Tag for a bulleted list?", options: [ "
<dl></dl>", "
<ol></ol>", "
<ul></ul>", "
<list></list>" ], answer: 2 }, { question: "17. CSS Property for line spacing?", options: [ "line-spacing", "line-height", "spacing", "letter-spacing" ], answer: 1 }, { question: "18. CSS Property for background color?", options: [ "color", "background-color", "background:color", "color:background" ], answer: 1 }, { question: "19. CSS Property for an image as a list bullet?", options: [ "list-image:", "list-style-image:", "list-image-src:", "image-list:" ], answer: 1 }, { question: "20. Display elements side by side?", options: [ "
display:left;", "
display:inline;", "
display:horizontal;", "
None" ], answer: 1 } ];
Answer Key with Reasoning
Here’s a concise reasoning table explaining the correct answers for all 20 HTML & CSS questions:
| Q# | Correct Answer | Reasoning |
|---|---|---|
| 1 | p { } | The p selector targets all <p> elements in CSS. |
| 2 | #logo { } | #id selects an element with a specific id (logo). |
| 3 | .alert { } | .class selects elements with the class alert. |
| 4 | margin | margin adds space outside an element. |
| 5 | a:focus | :focus applies styles when an element is focused (e.g., using Tab). |
| 6 | list-style-type:upper-roman; | Defines an ordered list using Roman numerals. |
| 7 | padding | padding adds space inside an element, between content and border. |
| 8 | H1 | <h1> is the largest heading tag in HTML. |
| 9 | br | <br> inserts a line break in HTML. |
| 10 | b | <b> makes text bold in HTML. |
| 11 | i | <i> makes text italic in HTML. |
| 12 | <a href='site.com'>Link</a> | <a> creates a hyperlink in HTML. |
| 13 | A href='mailto:email.com' | mailto: opens the default email client with the given email address. |
| 14 | A href='url' target='_blank' | target='_blank' opens a link in a new tab/window. |
| 15 | Ol | <ol> creates a numbered (ordered) list. |
| 16 | Ul | <ul> creates a bulleted (unordered) list. |
| 17 | line-height | Controls the spacing between lines of text. |
| 18 | background-color | Sets the background color of an element. |
| 19 | list-style-image: | Specifies an image as a list item bullet. |
| 20 | display:inline; | Displays elements inline, making them appear side by side. |
Key Takeaways from HTML CSS Quiz
Wow! Did you enjoy it? We hope you would have liked the variety of questions asked in the above quiz. We want to thank you for taking the time to go through this test. Simultaneously, we recommend you not simply leave but attempt some more cool Web Dev quizzes and read related programming articles from our blog.
Try These Coding Questions: 10 Java Coding Questions for Testers
We firmly believe that spreading knowledge is a step to enhance it further. When readers review our work and share their feedback, they encourage us to deliver better. That’s why we always ask them to leave their response in the comment box. Check this famous quote on learning by doing.
For the things we have to learn before we can do them, we learn by doing them.
Aristotle, The Nicomachean Ethics
Before you go, why not share this HTML CSS quiz with your friends? Spread the knowledge on social media, and don’t forget to subscribe to our YouTube channel.
Enjoy Learning,
TechBeamers
