HTML & CSS

Given the following HTML and CSS, what will be the result of applying the CSS?

     HTML:

           <div class="container">

  <p class="text">Text</p>

</div>

CSS:

      .container {

  display: grid;

  grid-template-columns: 1fr 2fr;

  grid-template-rows: 1fr 2fr;

        }

.text {

  grid-column: 2;

  grid-row: 1 / 3;

       }

• a) The paragraph will span the entire height of the grid but only in the second column.

• b) The paragraph will be positioned in the first row and second column.

• c) The paragraph will occupy the first column and span both rows.

• d) The paragraph will be placed in the second column and span two rows

Given the following CSS, which rule will affect the :nth-of-type selector?
CSS:

     ul li:nth-of-type(odd) {

  color: red;

}

• a) It will select and color the odd-numbered <li> elements within any <ul> in red.

• b) It will select and color the even-numbered <li> elements within any <ul> in red.

• c) It will select all <li> elements in odd-numbered <ul> only.

• d) It will color all <li> elements in red regardless of their position.

What will be the outcome of the following CSS applied to the HTML element?

Html :

<div class="box">Content</div>
CSS :

.box {
  position: relative;
  top: 20px;
  left: 30px;
}
.box::before {
  content: "Prefix";
  position: absolute;
  top: -20px;
  left: -30px;
}

• a) The "Prefix" content will be positioned relative to the box, extending beyond its top and left edges.

• b) The "Prefix" content will be positioned within the box, overlapping the original content.

• c) The "Prefix" content will not be visible because it’s positioned outside the box's area.

• d) The box will be displaced by 20px from the top and 30px from the left.

Which CSS property is used to control the stacking order of positioned elements?

• a) position

• b) order

• c) stack-order

• d) z-index

What is the effect of the following CSS on the <div> element?

html

<div class="element">Text</div>

css

.element {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 200px;
}

• a) The text will be stretched to fill the container and aligned at the center.

• b) The text inside the <div> will be aligned to the end of the container and centered horizontally.

• c)The text inside the <div> will be centered vertically and aligned to the start of the flex container.

• d) The text will be centered horizontally and aligned to the end of the container.

Which CSS pseudo-class will select all <a> elements that have a visited link?

• a) :link

• b) :visited

• c) :hover

• d) :focus

What will be the visual result of this CSS rule on a block element?

css

.box {
  width: 100px;
  height: 100px;
  border: 5px solid red;
  box-sizing: border-box;
}

• a) The element will have a total width and height of 100px, including the border.

• b) The element will have a width and height of 90px due to the border.

• c) The element will have an additional 10px padding inside the border.

• d) The element will expand beyond 100px width and height to accommodate the 

What is the result of applying the following CSS to the HTML element?

html

<p class="text">Sample Text</p>

css

.text {
  font-size: calc(10px + 2vw);
  line-height: 1.5;
}

• a) The font size will be a combination of 10px plus 2% of the viewport width.

• b) The font size will be fixed at 10px.

• c) The font size will be responsive to the viewport width only.

• d) The line height will be 1.5 times the font size.

Given the following HTML and CSS, how will the .box class behave?

html

<div class="box">Content</div>

css

.box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column: 1 / 4;
}

• a) The .box will span all three columns of the grid container.

• b) The .box will span the first two columns only.

• c) The .box will be centered in the first column.

• d) The .box will occupy only the third column.

What will be the result of the following CSS applied to the <div> element?

html

<div class="container">
  <p class="item">Item</p>
</div>

css

.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 50px 100px;
}
.item {
  grid-area: 1 / 2 / 3 / 3;
}

• a) The .item will span the entire grid area.

• b) The .item will be placed in the first row, first column.

• c) The .item will span from the first row to the second row and the second column to the third column.

• d) The .item will be positioned only in the second row and second column.