CSS Flashcards Preview

HTML Interview questions > CSS > Flashcards

Flashcards in CSS Deck (20)
Loading flashcards...
1

Suppose in your CSS markup, you have not specified any position attribute for a ‹div› element. What position value will the ‹div› element be assigned in this case, name all of the position attributes?

static
the rest
relative, absolute, fixed and inherit

2

You are given code to debug in which the z-index values are not being applied to create the correct overlays. What value for the position could most likely be causing this?

static, because when this is used, the z-index values are ignored

3

Your client wishes you to design a web page with lengthy content on which a message persistently shows even when the web page is scrolled down. How would you do this?

Show the message in an element that has its position attribute value set to fixed

4

You have just completed code that would allow an image to stay at the top of the visual screen even when the web page is being scrolled. However, a friend of yours tells you that this effect is not working on a newer version of Internet Explorer. How would you fix this?

This issue has to do with using the fixed position property in Internet Explorer. Internet Explorer supports this property only if the web page document's !DOCTYPE is specified.

5

What is a similarity and a difference between the fixed and absolute position values?

Both values cause the element to be ignored in the document flow, so other elements won't wrap around the fixed or absolute positioned element. However, fixed value causes the element to be shown persistently on the screen, even when the web page is scrolled.

6

How does an absolutely positioned element behave on the document flow?

The absolute element will not flow around the content of any other element, and the content of the web page will also not flow around the absolute element. That means an absolutely positioned element can overlap other elements.

7

Inspect the following CSS code, and describe what it may achieve.
div {
position: relative; left: -20px;
}

This markup would relatively position all
elements on this web page. The relative position will allow part of the element to go off the left side of the screen.

8

The code below is an attempt to fix the positioning of 2 images on a web page. Describe any overlapping of the elements.
#img1 {
position: absolute;
z-index: 2; }
#img2 { z-index: 3; }

Because img2 has the higher z-index, it would have been displayed in front of img1. However, since img1 has an absolute positioning and img2's position is static by default, img1 will be displayed on top of img2. This is because the default static causes z-index to be ignored.

9

While setting the position of HTML elements using CSS, what are the possible values that can be set?

The position attribute can be set to 5 possible values: static, relative, absolute, fixed, inherit

10

Once the position attribute is set, what attributes are used to set the actual location of an element on the screen?

top, bottom, left, right

11

What CSS attribute and value would you use to hide an element from showing on a web page?

There are two attributes available to do this. These are visibility: hidden, and display: none

12

Your client is complaining about a white area showing on their web site's main page. The white area has nothing in it. Upon reading the specifications, you read that there was an element to be hidden. Comment on this issue and possible solutions

This issue is as a result of using the visibility attribute to make the element visible. Even though the element is not showing, it is still taking up screen space as if it was visible, causing the white area. Using display: none instead would solve the problem

13

A web page contains various elements with their visibility attributes set to either show or hide these elements. What are the possible values that can be used for the visibility CSS attribute of these elements?

hidden, visible

14

You are maintaining legacy CSS code, you notice that the visibility attribute for an image has been set to visibility: collapse. Is this an error, and what effects would this have?

Only for table elements. collapse removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content.
If collapse is used on other elements, it renders as "hidden" image will act the same

15

Inspect the code skeleton below which includes CSS and HTML. How would the span element be displayed?
‹style›
#div1 {visibility: visible;
}
#div 2 {
visibility: hidden;
}
span {
visibility: inherit;
}
‹/style›
‹div id=”div1”›‹/div›
‹div id=”div2”›‹span›‹/span›‹/div›

The span element would be invisible because its visibility is inherited from its parent container which is “div2”

16

On a web page that is targeted towards visitors mostly using Internet Explorer, there are various images. What are the possible values that can be used for the display CSS attribute of these images?

none, inline, block, inherit

17

You are asked to make an image completely invisible on a client's web page so that the user isn't aware of it. There will be an additional script that would make it visible as a surprise to the user. What CSS attribute and value would be most effective in achieving this?

display: none, because this would cause the image to be hidden and also cause the document flow to behave as if the image tag was not there at all

18

You are asked to fix a problem for a web site and while inspecting the CSS, you notice the code given below. What will be the effect of this code?
body { display: none; }

This will cause all elements on the web page to be invisible, causing a blank page.

19

Investigate the following code of HTML and CSS, and comment on how the elements would be displayed on the web page.
‹style›
#span1{ display: block; }
‹/style›
‹span id="span1"›‹/span›
‹span id="span2"›‹/span›

The only noticeable effect of the CSS code is that span2 would be displayed after a line break because span1 is being displayed as block.

20

What HTML element behaves the same way as if its display attribute is set to block?

‹p› element, because it adds a line break after its content is displayed.