Describe what a “reset” CSS file does and how it’s useful?

It’s a short, often compressed (minified) set of CSS rules thatresets the styling of all HTML elements to a consistent baseline.

Every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything.

Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.

Describe Floats and how they work.

When you float an element it becomes a block box. This box can then be shifted to the left or right on the current line. The markup options are “float: left”, “float: right” or “float: none”. A floated box is laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content can flow down the right side of a left-floated box and down the left side of a right-floated box. You can also put several floats beside each other. If there isn’t enough horizontal room on the current line for the floated box, it will move downward, line by line, until a line has room for it. You should always set a width on floated items. If no width is set, the results can be unpredictable.

Elements following a floated element will wrap around the floated element. If you do not want this to occur, you can apply the “clear” property to these following elements. The four options are “clear: left”, “clear: right”, “clear: both” or “clear: none”.

What are the various clearing techniques and which is appropriate for what context?

before and after pseudo classes
overflow property of the container
with another element with clear property

Explain CSS sprites, and how you would implement them on a page or site.

An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.

Every single image, whether it’s an <img> tag or an background-image from your CSS is a separate HTTP-Request. Reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.

What are the different ways to visually hide content (and make it available only for screen readers)?

text Indent

.element-invisible 
{ 
    text-indent: -9999em; outline: 0; 
}

position Absolute and Collapsed

.element-invisible 
{ 
    height: 0; 
    overflow: hidden; 
    position: absolute; 
}

position Absolute and Offscreen

.element-invisible 
{ 
    position: absolute; 
    top: -999999em; 
    left: auto; 
    width: 1px; 
    height: 1px; 
    overflow:hidden; 
}

clip Method

.element-invisible 
{ 
    position: absolute !important; 
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 
    clip: rect(1px, 1px, 1px, 1px); 
}

a few techniques into one

.element-invisible 
{ 
    position: absolute !important; 
    height: 1px; 
    width: 1px; 
    overflow: hidden; 
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 
    clip: rect(1px, 1px, 1px, 1px); 
}

Remarks:

visibility: hidden; and/or display:none;
These styles will hide text from all users. The text is removed from the visual flow of the page and is ignored by screen readers.
width:0px; height:0px
Because an element with no height or width is removed from the flow of the page, most screen readers will ignore this content. HTML width and height may give the same result.

Have you ever used a grid system, and if so, what do you prefer?

Blueprint CSS – in the past
Foundation – in the past
Bootstrap – currently
Pure – maybe soon

How do you optimize your webpages for print?

By adding external stylesheet and apply some rules.

<link rel="stylesheet"  href="print.css" media="print">

What to remove:

navigation (not needed on paper)
background images (can make text hard to read)

Rules to apply:

dark text on a white background
important images: logo, products etc…
hierarchical headers
page URL
make some tests – preview before print

What are the advantages/disadvantages of using CSS preprocessors? (SASS, Compass, Stylus, LESS) If so, describe what you like and dislike about the CSS preprocessors you have used.

Try to compare articles attached to this question. It depends what to treat as advantage or disadvantage.

Advantages:

global changes (e.g. colors) in one place

Disadvantages:

relying on a preprocessor for any update or change (ensure consistency with preprocessor and generated CSS)

To consider:

nested structure
extensions and mixins
generated CSS size

How would you implement a web design comp that uses non-standard fonts? Webfonts (font services like: Google Webfonts, Typekit etc.)

using @font-face

using font service link

<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.

All HTML elements can be considered as boxes. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add the padding, borders and margins.

IE8 and earlier versions of IE, included padding and border in the width property. To fix this problem, add a <!DOCTYPE html> to the HTML page.

Content - The content of the box, where text and images appear
Padding - A transparent area surrounding the content (i.e., the amount of space between the border and the content)
Border - A border surrounding the padding (if any) and content
Margin - A transparent area surrounding the border (i.e., the amount of space between the border and any neighboring elements)

List as many values for the display property that you can remember.

none
inherit
inline
inline-block
block
table
table-cell
…

What’s the difference between inline and inline-block?

Inline:

respects left and right margins and padding
doesn’t respect top and bottom margins and padding
doesn’t have a width and height
allow other elements to sit to its left and right

Block:

respects all margins and paddings
respects width and height
line break after

Inline-block:

placed like an inline element (on the same line) but behaves as block
respects all margins and paddings
respects width and height
allow other elements to sit to its left and right

What’s the difference between a relative, fixed, absolute and statically positioned element?

Absolute

displayed on the page in relation to the document, or a parent element with a positioning different from static
using top, left, bottom and right CSS properties, exact position can be specified

Fixed

position in relation to the browser window
allows to display toolbars, buttons or navigation menus, which are anchored at a fixed position and scroll with the page

Relative

moves an element from its normal position with the top, left, bottom and right CSS properties

Static

means that every element is positioned in the natural order it is added to the page

Hope these helped! Stay tuned for the next set!