CSS Interview Questions

What is the elemental unit of CSS? And what are the two parts of that?

A rule is compose of a selector and a declaration.

What is contextual selector?

A selector that relies on the DOM hierarchy of (an) element(s) to select. The tags/classes/ids are separated by spaces in the CSS rule.

What is the difference between an ID selector and CLASS?

An ID selector identifies and sets style to only one occurrence of an element, while CLASS can be attached to any number of elements.

How do I center block-elements with CSS1?

By setting the properties margin-left and margin-right to auto and width to some explicit value: BODY {width: 30em; background: cyan;} P {width: 22em; margin-left: auto; margin-right: auto}

What is CSS?

CSS is a standard for applying style to HTML elements. Theoretically, the use of CSS promotes the separation of content and design, allowing the designer to focus on how a Web application will look while the developer(s) concentrate on the structure (HTML) and functionality (JS).

What does the cascading portion of CSS mean?

Cascading occurs if multiple styles are defined for an element. In general, values will be applied from the more specific style sheet using a point-system for selectors that id based on tag, class and id (least specific to most specific).

What is grouping?

Grouping applies the CSS rule to more than one selector, each separated by comma.

What are different ways to apply styles to a Web page?

Inline, embedded, linked and imported

When do HTML attributes take precedence over CSS properties?

Only when the browser does not support CSS.

What are pseudo classes?

Pseudo classes allow you to identify HTML elements on characteristics (as opposed to their name or attributes). The classes are specified using a colon to separate the element name and pseudo class. a:hover {font-color: yellow;} p.first-child {font-weight: bold;}

What does the following CSS do? P {font-family: Verdana, Arial, Helvetica;}

The CSS sets the font for the P element. If available in the browser, Verdana is used. If Verdana is not available, Arial is used. If Arial is not an option, Helvetica is utilized.

Is CSS case-sensitive?

The CSS standard is not case-sensitive, but if an XHTML doctype is used, then CSS class names will be case-sensitive in some browsers. In addition, items like font families, image URLs, and other direct references with the style sheet can be case-sensitive. To be safe, you should stick with lower-case to avoid confusion or unexpected problems.

What is a child selector?

The selector in the CSS rule is denoted with a '>' and means hierarchical context only include the child descendants, not grandchildren, etc.

What do you see in the future of Web design?

This is an open-ended question that is purely subjective, but I want to hear the candidate discuss the explosion of non-standard devices such as phones, video game consoles, and so forth. These new platforms are changing how sites are designed. The candidate gets extra credit if they drop the phrase "responsive design."

Three selectors: h1, .warning and #footer, what they do ?

all h1 tags, all elements with the 'warning' class and the element with the 'footer' id.

What the difference between display:none and visibility:hidden?

display:none means that the the tag in question will not appear on the page at all but there will be no space allocated for it between the other tags. Visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page.

What is the default value for the DISPLAY attribute?

inline

What are the possible values for the POSITION attribute? And what is the default value?

static(*default), absolute, fixed, relative, inherit

How does the browser decide where to position absolute elements?

static: top, right, bottom, left properties are ignored and the element is added to the natural document flow. fixed: Element is positioned relative to the screen. absolute: Element is positioned relative to the first non-static ancestor. relative: Element is positioned relative to its natural position. inherit: Position property is inherited from parent.

How do I have a background image that isn't tiled?

Specify the background-repeat property as no-repeat. You can also use the background property as a shortcut for specifying multiple background-* properties at once. Here's an example: BODY {background: #FFF url(watermark.jpg) no-repeat;} body { background-image:url('paper.gif'); background-repeat:repeat-y; }