Interview Questions

Question 1

What are pseudo classes and what are they used for?

Answer 1

Pseudo classes are similar to classes, but are not explicitly defined in the markup, and are used to add additional effects to selected HTML elements

a:link{ color: blue }, or a:visited { color: red }

Question 2

What is an ID selector and how is it used?

Answer 2

IDs are used to identify and apply styling to a single specific HTML element.

Question 3

What is a Class selector and how does it differ from an ID selector?

Answer 3

Class selectors are used to apply style to multiple HTML identified with the same class.

Question 4

What are child selectors?

Answer 4

Child selectors are another way to group and style a set of elements that descend from a parent element.

body > p

Question 5

What are the different CSS properties used to change dimensions and what values can they accept?

Answer 5

height: Sets a specific height
 auto
 length
 %
 inherit

width:
max-height:
max-width:
min-height:
min-width:

Question 6

How is the float property implemented in CSS?

Answer 6

Floats can only accept a left or right value.

Question 7

What is the CSS Box Model used for? What are the elements that it includes?

Answer 7

CSS box model is made up of margins, borders, padding, and content.
Box model provides a structured way to space elements in relationship to each other.

Question 8

What is the purpose of pseudo-elements and how are they made?

Answer 8

Most commonly used pseudo-elements are ::first_line, ::first_letter, ::before, ::after

Question 9

How are inline and block elements different from each other?

Answer 9

A block element is an element that takes up the full width available, and has a line break before and after it. <h1>, </h1><p>, </p><li>, and <div> are all examples of block elements.

An inline element only takes up as much width as necessary, cannot accept width and height values, and does not force line breaks. <a> and <span> are examples of inline elements.</span></a></div></li>

Question 10

What are the various techniques for clearing floats?

Answer 10

At some point or another, you will likely experience a collapsed float, which you will need to address.
This can be accomplished several ways, including using a clearfix2, by floating the parent element of the collapsed element, or by using an overflow property3.

Question 11

Explain the difference between visibility:hidden and display:none

Answer 11

visibility: hidden simply hides the element, while it will still take up space and affect the layout of the document.
display: none also hides the element, but will not take up space and the page will appear as if the element is not present.

Question 12

What does DOCTYPE mean?

Answer 12

The term DOCTYPE tells the browser which type of HTML is used on a webpage

Question 13

What are some new HTML5 markup elements?

Answer 13

There are several: , , , , , , , , , , , , , , , , , , , and .

Question 14

What are the new media-related elements in HTML5?

Answer 14

HTML5 has strong support for media. There are now special and tags. There are additional A/V support tags as well: is a container for 3rd party applications. is for adding text tracks to media. is useful for A/V media from multiple sources.

Question 15

Describe the difference between cookies, sessionStorage, and localStorage.

Answer 15

Cookies are small text files that websites place in a browser for tracking or login purposes. Meanwhile, localStorage and sessionStorage are new objects, both of which are storage specifications but vary in scope and duration. Of the two, localStorage is permanent and website-specific whereas sessionStorage only lasts as long as the duration of the longest open tab.

Question 16

Fix The Sidebar

Answer 16

Using box-sizing: border-box;

Question 17

css uppercase text

Answer 17

text-transform:uppercase;

Question 18

css box-shadow

Answer 18

box-shadow: 3px 3px 5px 6px #ccc;

The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.

The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.

The blur radius (optional), if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.

The spread radius (optional), positive values increase the size of the shadow, negative values decrease the size. Default is 0 (the shadow is same size as blur).

Color

Question 19

What is the difference between inline and block elements?

Answer 19

Block elements: will fill width of parent container. Can Have margins and padding. Will expand to fit child elements.
Examples:

<p>, </p>

<div>, , , , <ul>, <li>, and <h1>.

Inline elements: Will not clear previous content like block elements. Ignores width height properties. Can apply left and right margins and all padding.
Subject to vertical-align.
Examples:
<a>, <span>, <b>, <em>, <i>, <cite>, </cite></i></em></b></span></a></h1></li></ul></div>

Question 20

What is the difference between margin and padding?

Answer 20

Padding is the space inside the border between the border and the actual image or cell contents.

Margins are the spaces outside the border, between the border and the other elements next to this object.

Question 21

What is the difference between classes and ids?

Answer 21

Use a class when you want to consistently style multiple elements throughout the page/site

Use the ID when you have a single element on the page that will take the style. Remember that IDs must be unique.

Question 22

What is the CSS box model?

Answer 22

Content - The content of the box, where text and images appear

Padding - Clears an area around the content. The padding is transparent

Border - A border that goes around the padding and content

Margin - Clears an area outside the border. The margin is transparent

div {
    width: 300px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
}

Question 23

What does a doctype do?

Answer 23

Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications.

Question 24

What are replaced elements?

Answer 24

I won’t provide a detailed explanation here; you can check out the SitePoint article linked in the previous paragraph for full details. But some examples of replaced elements include:

<img></img>, , , and .