Interview Questions Flashcards
What are pseudo classes and what are they used for?
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 }
What is an ID selector and how is it used?
IDs are used to identify and apply styling to a single specific HTML element.
What is a Class selector and how does it differ from an ID selector?
Class selectors are used to apply style to multiple HTML identified with the same class.
What are child selectors?
Child selectors are another way to group and style a set of elements that descend from a parent element.
body > p
What are the different CSS properties used to change dimensions and what values can they accept?
height: Sets a specific height auto length % inherit
width: max-height: max-width: min-height: min-width:
How is the float property implemented in CSS?
Floats can only accept a left or right value.
What is the CSS Box Model used for? What are the elements that it includes?
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.
What is the purpose of pseudo-elements and how are they made?
Most commonly used pseudo-elements are ::first_line, ::first_letter, ::before, ::after
How are inline and block elements different from each other?
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>
What are the various techniques for clearing floats?
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.
Explain the difference between visibility:hidden and display:none
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.
What does DOCTYPE mean?
The term DOCTYPE tells the browser which type of HTML is used on a webpage
What are some new HTML5 markup elements?
There are several: , , , , , , , , , , , , , , , , , , , and .
What are the new media-related elements in HTML5?
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.
Describe the difference between cookies, sessionStorage, and localStorage.
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.
Fix The Sidebar
Using box-sizing: border-box;
css uppercase text
text-transform:uppercase;
css box-shadow
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
What is the difference between inline and block elements?
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>
What is the difference between margin and padding?
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.
What is the difference between classes and ids?
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.
What is the CSS box model?
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;
}
What does a doctype do?
Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications.
What are replaced elements?
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 .
