Basic HTML & CSS Quiz

From basic tags and selectors to layout and positioning, this quiz covers essential topics that every beginner frontend web developer should know.

Question 1/15

Which of the following CSS properties is used to change the background color of an element?

Question 2/15

Which of the following HTML tags is used to create a form?

Question 3/15

Which of the following CSS properties is used to add a border around an element?

Question 4/15

Which of the following CSS properties is used to make text bold?

Question 5/15

Which of the following CSS properties is used to create space between elements?

Question 6/15

Which of the following HTML tags is used to define a heading?

Question 7/15

Which of the following is the correct HTML syntax for creating an unordered list?

Question 8/15

Which of the following HTML tags is used to create a button?

Question 9/15

Which of the following CSS properties is used to center text horizontally?

Question 10/15

Which of the following HTML tags is used to define a hyperlink?

Question 11/15

Which of the following HTML tags is used to define a table row?

Question 12/15

Which of the following CSS properties is used to change the font color?

Question 13/15

Which of the following CSS properties is used to change the height of an element?

Question 14/15

Which of the following HTML tags is used to insert an image?

Question 15/15

Which of the following CSS properties is used to change the font family of an element?
You did not answer any questions correctly.

Your Answers

Question 1/15

Which of the following CSS properties is used to change the background color of an element?

The background-color property is used to set the background color of an element in CSS. You can use a color name, a hexadecimal value, an RGB value, or an HSL value to specify the color.

Example code:

<style>
  body {
    background-color: #f2f2f2;
  }
</style>

Question 2/15

Which of the following HTML tags is used to create a form?

The <form> tag is used to create an HTML form, which is used to collect user input. You can use different form elements such as input fields, checkboxes, radio buttons, and select menus to create a form.

Example code:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <br>
  <button type="submit">Submit</button>
</form>

Question 3/15

Which of the following CSS properties is used to add a border around an element?

The border property is used to add a border around an element in CSS. You can specify the border style, width, and color using different border properties.

Example code:

<style>
  p {
    border: 1px solid black;
  }
</style>
<p>This paragraph has a black border</p>

Question 4/15

Which of the following CSS properties is used to make text bold?

The font-weight property is used to specify the weight or thickness of the font in CSS. To make text bold, you can set the font-weight property to bold.

Example code:

<style>
  p {
    font-weight: bold;
  }
</style>
<p>This text is bold</p>

Question 5/15

Which of the following CSS properties is used to create space between elements?

The margin property is used to create space around an element, and it can be set separately for each side of the element (top, right, bottom, left). Here is an example:

<html>
  <head>
    <title>Example using CSS margin property</title>
    <style>
      body {
        margin: 0;
      }
      h1 {
        margin: 20px 0;
      }
      p {
        margin: 0 10px;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p>This paragraph has a left and right margin of 10px.</p>
    <p>This paragraph also has a left and right margin of 10px.</p>
  </body>
</html>

In this example, we define a stylesheet using the <style> tag within the <head> tag of our HTML document.

We set the margin property to 0 for the body element, which will remove all margins from the body of the document.

We also set the margin property for <h1> and <p> elements. The 20px 0 value for the <h1> element will create a margin of 20 pixels on the top and bottom of the heading. The 0 10px value for the <p> element will create a margin of 0 pixels on the top and bottom and 10 pixels on the left and right of each paragraph.

Using a stylesheet allows us to define our styles in a separate file, which can be reused across multiple pages, and makes it easier to maintain and update our styles.

Question 6/15

Which of the following HTML tags is used to define a heading?

The <h1> tag is used to define a heading in HTML. The <p> tag is used to define a paragraph, the <div> tag is used to create a container for other HTML elements, and the <span> tag is used to group and style inline elements.

Example code:

<h1>This is a heading</h1>

Question 7/15

Which of the following is the correct HTML syntax for creating an unordered list?

The <ul> tag is used to create an unordered list in HTML, and each list item is represented by the <li> tag. Here is an example:

<ul>
  <li>Pizza</li>
  <li>Tacos</li>
  <li>Sushi</li>
  <li>Ice cream</li>
</ul>

In this example, we have an unordered list of four items that represent someone's favorite foods. We create the unordered list using the <ul> tag, which stands for "unordered list". 

Each item in the list is represented by the <li> tag, which stands for "list item". We have four list items, each containing the name of a favorite food. When the page is rendered in a web browser, the list items will be displayed as bullet points by default. You can modify the appearance of the list using CSS.

Question 8/15

Which of the following HTML tags is used to create a button?

The <button> tag is used to create a clickable button in HTML. You can use the type attribute to specify the type of button, such as "submit", "reset", or "button".

Example code:

<button type="submit">Submit</button>

Question 9/15

Which of the following CSS properties is used to center text horizontally?

The text-align property is used to horizontally align text and inline elements within a block-level element. Here's an example:

<style>
  .center {
    text-align: center;
  }
</style>

<div class="center">
  <h1>This heading is centered</h1>
  <p>This paragraph is also centered</p>
</div>

In this example, we define a CSS class called .center that sets the text-align property to center. We then apply this class to the parent <div> element using the class attribute.

Question 10/15

Which of the following HTML tags is used to define a hyperlink?

The <a> tag is used to define a hyperlink in HTML. It allows you to create clickable links to other web pages, files, or locations within the same page. Here is an example:

<a href="https://www.google.com/">Google</a>

In this example, we have a paragraph that contains a hyperlink to the Google homepage. We create the hyperlink using the <a> tag, which stands for "anchor".

The href attribute of the <a> tag specifies the URL of the page or file that the hyperlink should point to. In this case, we set the href attribute to "https://www.google.com/", which is the URL for the Google homepage.

The text "Google" between the opening and closing <a> tags will be displayed as the link text.

Question 11/15

Which of the following HTML tags is used to define a table row?

The <tr> tag is used to define a table row in HTML, and it should always be used within a <table> element. Each table row is divided into table cells represented by the <td> or <th> tag. Here is an example:

<!DOCTYPE html>
<html>
  <head>
    <title>Example of HTML table row</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>30</td>
          <td>Male</td>
        </tr>
        <tr>
          <td>Jane</td>
          <td>25</td>
          <td>Female</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

In this example, we have a table with two rows of data.

We create the table using the <table> tag. The <thead> tag is used to define the table header, which contains a single table row defined using the <tr> tag.

Each table header cell is defined using the <th> tag.

The <tbody> tag is used to define the table body, which contains two rows of data defined using the <tr> tag.

Each table cell within a table row is defined using the <td> tag.

When the page is rendered in a web browser, the table will be displayed with alternating row colors by default. You can modify the appearance of the table using CSS.

Question 12/15

Which of the following CSS properties is used to change the font color?

The color property is used to set the font color in CSS. You can use a color name, a hexadecimal value, an RGB value, or an HSL value to specify the color. Here is an example:

<style>
    body {
        color: red;
    }
    h1 {
        color: blue;
    }
    p {
        color: green;
    }
</style>

<body>
    <h1>Heading</h1>
    <p>This paragraph has green text.</p>
    <p>This paragraph also has green text.</p>
</body>

In this example, we set the color property to red for the body element, which will affect all text within the body of the document. We also set the color property to blue for <h1> elements and green for <p> elements. This will change the color of all headings and paragraphs in the document.

Question 13/15

Which of the following CSS properties is used to change the height of an element?

The height property is used to set the height of an element in CSS. You can specify the height using different units, such as pixels, ems, or percentages.

Example code:

<style>
  div {
    height: 200px;
  }
</style>
<div>This div has a height of 200 pixels</div>

Question 14/15

Which of the following HTML tags is used to insert an image?

The <img> tag is used to insert an image in HTML. You can use the src attribute to specify the URL of the image file.

Example code:

<img src="image.jpg" alt="A beautiful image">

Question 15/15

Which of the following CSS properties is used to change the font family of an element?

The font-family property is used to set the font family of an element in CSS. You can specify a list of font families, and the web browser will use the first available font on the user's system.

Example code:

<style>
  p {
    font-family: "Helvetica Neue", Arial, sans-serif;
  }
</style>
<p>This text uses the Helvetica Neue font on compatible systems</p>

Take Another Quiz

Advanced CSS Quiz

Advanced CSS Quiz designed to test your knowledge of advanced CSS concepts, including layout, positioning, blending, and responsive design. Start quiz

Agile Methodologies Quiz

Test your understanding of Agile methodologies, including Scrum, Kanban, and Lean. Understand how to use Agile principles to enhance the efficiency and productivity of your software development projects. Start quiz

Basic JavaScript Quiz

Test your understanding of the fundamental concepts and syntax of JavaScript, including variables, data types, conditionals, loops, and functions. Start quiz

CSS Box Model Quiz

Identify the correct box model properties for various layout scenarios and determine how changes to these properties affect the appearance of an element. Start quiz

CSS Flexbox Quiz

Test your knowledge of the CSS Flexbox layout module with multiple choice questions and their explanations. Start quiz

CSS Grid Quiz

Test your knowledge of CSS Grid with this quiz, covering topics such as grid properties, layout creation, and positioning of grid items. Start quiz