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

Explain the three main ways to apply CSS styles to a Web page

Inline: Though this method often goes against best practices, it's easily done by inserting a 'style' attribute inside an HTML element: ◾e.g.) <p style="color:blue">Lorem Ipsum</p> ◦Embedded/Internal: Done by defining the head of an HTML document by wrapping characteristics in a <style> tag. html-css-coding-screenshot ◦Linked/External: CSS is placed in an external .css file, and linked to the HTML document with a <link> tag. This can also be accomplished using the '@import', however, this can slow page load time and is generally not advised.

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 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>, <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.

Explain what a class selector is and how it's used.

◦A class can be thought of as a grouped collection of CSS attributes applied to HTML elements. This allows you to apply the same styling to multiple HTML elements by placing them in the same CSS class. ◦Class methods can be called by inserting a 'class' property and name within an HTML element, then calling the class name with a '.' in the CSS doc.

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.

List the main CSS style sheet properties:

◦Background ◦Text ◦Font ◦Border ◦Outline ◦Margin ◦Padding ◦List ◦Table

What are some of the new features and properties in CSS3?

◦Box model ◦New Web fonts ◦Rounded corners ◦Border Images ◦Box Shadows, Text Shadows ◦New Color schemes (RGBA) ◦Transform property ◦New Pseudo-classes ◦Multi-column layout ◦New Gradients

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 are child selectors?

◦Child selectors are another way to group and style a set of elements that descend from a parent element. ◦A child selector is matched by calling two or more elements, separated by a '>' sign to indicate inheritance.

How is the float property implemented in CSS?

◦Floats allow an element to be positioned horizontally, allowing elements below the floated element to flow around it. Several floating elements can be placed together to make a gallery type layout. ◦Floats can only accept a left or right value. ◾e.g.) img { float: right; width: 50px; margin: 5px; } ◦To prevent subsequent elements from flowing around the floated element, pass in the clear property, followed by the side you wish to disable (i.e., 'left', 'right', 'both').

What is grouping and what is it used for?

◦Grouping allows you to apply the same style to multiple elements with a single declaration. This is done by grouping the selectors into a list, separated by commas. e.g.) h1, h2 { font-family: Helvetica; font-size: 20; } ◦Grouping helps memory usage and enhances readability.

What are the advantages/disadvantages of using CSS preprocessors? (SASS, Compass, Stylus, LESS)

◦Here is another opportunity to discuss your personal preferences on use of CSS preprocessors and why. ◦While there's no right or wrong answer here, below are some commonly cited pros and cons of using preprocessors: Benefits: Ability to use nested sytax, define variables and mixins, use of mathematical and operational functions, and the ability to join multiple files into a single one. Disadvantages: Difficulties tracking file size, maintenance and updating issues, difficulties debugging.

What is an ID selector and how is it used?

◦IDs are used to identify and apply styling to a single specific HTML element. IDs are defined within the HTML page by inserting an ID selector in the HTML element: ◾eg) HTML CSS Coding ◦ID selectors are defined within the CSS page by calling a '#' followed by the name of the ID: ◾eg) HTML CSS Coding ◦ID selectors are unique and can only be applied to a single element.

How to restore the default property value using CSS?

◦In short, there's no easy way to restore to default values to whatever a browser uses . The closest option is to use the 'initial' property value, which will restore it to the default CSS values, rather than the browser's default styles.

Why shouldn't I use fixed sized fonts ?

◦Often times, fixed font sizes will show up incorrectly on the user end and will prohibit responsiveness. Using relative sizing will keep fonts proportionate in their relationships to each other and will allow for greater end user flexibility.

Which font names are available on all platforms ?

◦Only five basic font families( serif, sans-serif, cursive, fantasy, and monsospace) are recognized across platforms, rather than specific fonts. ◦Specific font name recognitions will vary by browser.

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 such as link colors, hover actions, etc. ◦Pseudo classes are defined by first listing the selector, followed by a colon and then pseudo-class element. E.g., a:link{ color: blue }, or a:visited { color: red } ◾Pseudo-class syntax: selector:pseudo-class { property:value;} ◾Syntax for using a pseudo class within a CSS class: selector.class:pseudo-class { property:value;} ◦:link, :visited, :hover, :active, :first_line are all examples of pseudo classes, used to call a specific action on an element, such as the changing of a link color after it has been visited.

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

◦Pseudo elements are made using a double colon (::) followed by the name of the pseudo element. A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to: •Style the first letter, or line, of an element •Insert content before, or after, the content of an element

What are the advantages and disadvantages of External Style Sheets?

◦The biggest advantages of external style sheets are that they can be applied to multiple documents while being managed from a single style sheet. This keeps code DRY and improves efficiency and convenience. ◦The disadvantages are that it may decrease loading time in some situations. It may also not be practical if there are not enough styling conditions to justify an external sheet.

What is the purpose of the z-index and how is it used?

◦The z-index helps specify the stack order of positioned elements that may overlap one another. The z-index default value is zero, and can take on either a positive or negative number. ◦An element with a higher z-index is always stacked above one with a lower index. ◦Z-Index can take the following values: Auto: Sets the stack order equal to its parents. Number: Orders the stack order. Initial: Sets this property to its default value (0). Inherit: Inherits this property from its parent element.

Why and how are shorthand properties used? Give examples.

◦Using shorthand properties can improve page load times and reduce file size. ◦Can be done with background, font, border, padding, outline, and list-style properties. ◦Shorthanding is accomplished by listing the property values on a single line, in a specific order.

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: Sets a specific width ◾auto ◾length ◾% ◾inherit ◦max-height: Sets a maximum height ◾auto ◾length ◾% ◾inherit ◦max-width: Sets a maximum width ◾auto ◾length ◾% ◾inherit ◦min-height: Sets a minimum height ◾auto ◾length ◾% ◾inherit ◦min-width: Sets a minimum width ◾auto ◾length ◾% ◾inherit

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.

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; }