CSS Interview Questions and Answers Set

CSS Interview Questions And Answers
Set - 1
What is CSS?
1. CSS stands for Cascading Style Sheets and is a simple styling language which allows
attaching style to HTML elements. Every element type as well as every occurrence of a
specific element within that type can be declared an unique style, e.g. margins,
positioning, color or size.
2. CSS is a web standard that describes style for XML/HTML documents.
3. CSS is a language that adds style (colors, images, borders, margins…) to your site. It’s
really that simple. CSS is not used to put any content on your site, it’s just there to take
the content you have and make it pretty. First thing you do is link a CSS-file to your
HTML document. Do this by adding this line:
<link rel="stylesheet" href="style.css"

type="text/css">
The line should be placed in between your <head> and </head> tags. If you have several
pages you could add the exact same line to all of them and they will all use the same
stylesheet, but more about that later. Let’s look inside the file “style.css” we just linked
to.
h1 {
font-size: 40px;
height: 200px;
}
.warning {
color: Red;
font-weight: bold;
}
#footer {
background-color: Gray;
}
4. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts,
colors, spacing) to Web documents. This is also where information meets the artistic
abilities of a web-designer. CSS helps you spice up your web-page and make it look neat
in wide variety of aspects.
What are Cascading Style Sheets?

A Cascading Style Sheet (CSS) is a list of statements (also known as rules) that can
assign various rendering properties to HTML elements. Style rules can be specified for a
single element occurrence, multiple elements, an entire document, or even multiple
documents at once. It is possible to specify many different rules for an element in
different locations using different methods. All these rules are collected and merged
(known as a "cascading" of styles) when the document is rendered to form a single style
rule for each element.
How do I center block-elements with CSS1?

There are two ways of centering block level elements:
1. 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}
In this case, the left and right margins will each be four ems wide, since they equally split
up the eight ems left over from (30em - 22em). Note that it was not necessary to set an
explicit width for the BODY element; it was done here to keep the math clean.
Another example:
TABLE {margin-left: auto; margin-right: auto; width: 400px;}

In most legacy browsers, a table's width is by default determined by its content. In CSS-
conformant browsers, the complete width of any element (including tables) defaults to
the full width of its parent element's content area. As browser become more conformant,
authors will need to be aware of the potential impact on their designs.
If background and color should always be set together, why do they exist as separate
properties?
There are several reasons for this. First, style sheets become more legible -- both for
humans and machines. The background property is already the most complex property in
CSS1 and combining it with color would make it even more complex. Second, color
inherits, but background doesn't and this would be a source of confusion.
What is class?
Class is a group of 1) instances of the same element to which an unique style can be
attached or 2) instances of different elements to which the same style can be attached.
1) The rule P {color: red} will display red text in all paragraphs. By classifying the
selector P different style can be attached to each class allowing the display of some
paragraphs in one style and some other paragraphs in another style.
2) A class can also be specified without associating a specific element to it and then
attached to any element which is to be styled in accordance with it's declaration. All
elements to which a specific class is attached will have the same style.
To classify an element add a period to the selector followed by an unique name. The
name can contain characters a-z, A-Z, digits 0-9, period, hyphen, escaped characters,
Unicode characters 161-255, as well as any Unicode character as a numeric code,
however, they cannot start with a dash or a digit. (Note: in HTML the value of the
CLASS attribute can contain more characters). (Note: text between /* and */ are my
comments).
CSS
P.name1 {color: red} /* one class of P selector */
P.name2 {color: blue} /* another class of P selector */
.name3 {color: green} /* can be attached to any element */
HTML
<P class=name1>This paragraph will be red</P>
<P class=name2>This paragraph will be blue</P>
<P class=name3>This paragraph will be green</P>
<LI class=name3>This list item will be green</LI>
It is a good practice to name classes according to their function than their appearance;
e.g. P.fotnote and not P.green. In CSS1 only one class can be attached to a selector. CSS2
allows attaching more classes, e.g.:
P.name1.name2.name3 {declaration} <P class="name1 name2 name2">This paragraph
has three classes attached</P>
What is grouping ?
Grouping is gathering (1) into a comma separated list two or more selectors that share the
same style or (2) into a semicolon separated list two or more declarations that are
attached to the same selector (2).
1. The selectors LI, P with class name .first and class .footnote share the same style, e.g.:
LI {font-style: italic}
P.first {font-style: italic}
.footnote {font-style: italic}
To reduce the size of style sheets and also save some typing time they can all be grouped
in one list.
LI, P.first, .footnote {font-style: italic}
2. The declarations {font-style: italic} and {color: red} can be attached to one selector,
e.g.:
H2 {font-style: italic}
H2 {color: red}
and can also be grouped into one list:
H2 {font-style: italic; color: red}
What is external Style Sheet? How to link?

External Style Sheet is a template/document/file containing style information which can
be linked with any number of HTML documents. This is a very convenient way of
formatting the entire site as well as restyling it by editing just one file. The file is linked
with HTML documents via the LINK element inside the HEAD element. Files containing
style information must have extension .css, e.g. style.css. <HEAD> <LINK
REL=STYLESHEET HREF="style.css" TYPE="text/css"> </HEAD>
Is CSS case sensitive?

Cascading Style Sheets (CSS) is not case sensitive. However, font families, URLs to
images, and other direct references with the style sheet may be.
The trick is that if you write a document using an XML declaration and an XHTML
doctype, then the CSS class names will be case sensitive for some browsers.
It is a good idea to avoid naming classes where the only difference is the case, for
example:
div.myclass { ...}
div.myClass { ... }
If the DOCTYPE or XML declaration is ever removed from your pages, even by mistake,
the last instance of the style will be used, regardless of case.
Three selectors: h1, .warning and #footer, what they do ?

An element points at a HTML-tag somewhere on your page. In the example above we
want to style the <h1>-tag. Note that using an element like that affects all tags with that
name, so using p { margin-left: 100px; } gives all <p>-tags a left-margin.
Using a class is just as simple. When writing .your_class you style all tags with a class
with the name “your_class”. In the example above we have .warning which will style e.g.
<div class="warning"> and <em class="warning">, that is, any element with the class
warning. Classes are used when you want to style just a few of your tags in a way,
perhaps you want some of your links red? Add a class to all those links.
You need one more building block: the id. This time you style an element with the
attribute “id” set to the id you have chosen. Ids work exactly like classes except for one
thing; you can only have one id with a certain name in each of your HTML documents. In
the example above we style <div id="footer">. If you look at the example it does make
sense: a HTML document may contain several warnings but only one footer. Ids should
be used when you want to style just one specific tag.
Using those three building blocks will take you far but when you get to more advanced
layouts you might want to combine the building blocks into more advanced selectors. Just
to give you two examples of what you can do: em.warning to style only those <em>-tags
with the class .warning set. You can also use #footer a to style only the links that are
nested inside the tag with id “footer.
Each of the selectors has a set of declarations tied to them. Each declaration has a
property, describing what we want to change and a value, what we should change it to.
An example: a { color: Blue; font-size: 3em; }. You have the selector a there, so all links
in your document will be styled. We have two declarations: color: Blue and font-size:
3em;. Lastly each declaration consists of two parts: the property color and the value Blue.
there is a LOT of things you can style and play with. Additionally (close to) all tags are
equal in CSS, so you can set e.g. borders and colors of any element just like you could
with a table if you used only HTML.
What are Style Sheets?

Style Sheets are templates, very similar to templates in desktop publishing applications,
containing a collection of rules declared to various selectors (elements).
What is CSS rule 'ruleset'?

There are two types of CSS rules: ruleset and at-rule. Ruleset identifies selector or
selectors and declares style which is to be attached to that selector or selectors. For
example P {text-indent: 10pt} is a CSS rule. CSS rulesets consist of two parts: selector,
e.g. P and declaration, e.g. {text-indent: 10pt}.
P {text-indent: 10pt} - CSS rule (ruleset)

{text-indent: 10pt} - CSS declaration
text-indent - CSS property
10pt - CSS value
//////////////////////////////////////////////////////////////////////
Question:
What is a DTD? What DTD do you generally use? Why? Pros and cons.
Answer
See the bottom half of DTD: the Document Type Declaration
Answer Rating:
1. Completely wrong answer though pretends to know it

2. I don’t know (I give points for honesty), trying unsuccessfully but honestly to
give the right answer
3. Knowledge of the definition, but doesn’t know why they are used.
4. Knowledge of which one to use and why
5. Explanation of Quirks mode versus Regular mode and analysis of which one is
best for different media
Accessibility Interview Question
Question
Tell me some considerations in selecting font size?

Answer
Font sizes should be declared using relative measurement values, such as ems, via a style
sheet, without the use of the term !important. There are issues with browser font size
enlarging which can be rectified via CSS.
Answer Rating
1. uses <font> tag

2. Gives an answer using pixels using CSS
3. Explains that font size should be declared using relative font sizes
4. Explains that font size should be declared using ems or percentages
5. Gives the answer above
CSS Interview Question
Question
a) What are the possible values for the display attribute that are supported by all
browsers?
b) What is the default value for the display attribute for the image element? (what is the
difference between inline and block level elements)
c)What does display: run-in do?
d) Difference between "visibility:hidden" and "display:none"? What are the pros and cons
of using display:none?
Answer
main values: none, block, inline, list-item, run-in

all values: inline | block | list-item | run-in | compact | marker | table | inline-table | table-
row-group | table-header-group | table-footer-group | table-row | table-column-group |
table-column | table-cell | table-caption | none | inherit
default value: inline, block or list-item, depending on the element. The <img> is an inline
element.
Run-in should make the run-in element be the first line of the next sibling block level
element, if it is before a block level element that is not floated or absolutely positioned. If
the next sibling is positioned or floated, then the run-in element will be a block level
element instead of appearing in-line.
PPK’s Quirksmode explains it well. The w3schools lists table display values.
When visibility is set to hidden, the element being hidden still occupies its same place in
the layout of the page. If the display is set to none, the element does not occupy any
space on the page — as if it didn’t exist..
Answer Rating
1. Doesn’t know
2. Knows the answer to A
3. Knows the answer to A and D
4. Knows the answer to A, B and D
5. Knows the answer to C too!
Question
a) What are the five possible values for "position"?

b) What is the default/initial value for "position"?
c) How does the browser determine where to place positioned elements
d) What are the pros and cons of using absolute positioning?
e) if they are really advanced, ask about IE z-index issues with positioned elements.
Answer
a) Values for position: static, relative, absolute, fixed, inherit

b) Static
c) They are placed relative to the next parent element that has absolute or relative value
declared
d) Absolutely positioned elements are removed from the document flow. The positioned
element does not flow around the content of other elements, nor does their content flow
around the positioned element. An absolutely positioned element may overlap other
elements, or be overlapped by them.
e) IE treats a position like a z-index reset, so you have to declare position of static on the
parent element containing the z-indexed elements to have them responsd to z-index
correctly.
Answer Rating
1. Doesn’t know
2. Knows 4 out of 5 answers in part A
3. Knows A & B
4. Knows A, B & C
5. Knows A-D
6. Knows E too
Question:
Write a snippet of CSS that will display a paragraph in blue in older browsers, red in
newer browsers, green in IE6 and black in IE7
Possible Answer:
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
Answer Rating
1. Doesn’t know
2. Knows how to declare one color, but no hacks
3. knows the html>body hack and * html hack
4. Knows all the hacks, but doesn’t validate or uses conditional comments in the
HTML
5. Gives you the right answer and explains why the CSS won’t validate, or, uses a
valid hack, other than conditional IE comments, instead of the above answer.
Basic Javascript Interview Question
Question:
What is the correct way to include JavaScript into your HTML?
Answer:
See Including Javascript in XHTML for answers.
Answer Rating:
1. <a href="javscript:function()"> - and other incorrect answers

2. verbally explains the theory but doesn’t know how to do it
3. correct explanation using inline event handlers or inline code
4. discusses and knows how to implement javascript event listeners
5. Explainst how you include JS within an XHTML document and ensure it
validates using CDATA, explains
Basic Javascript Array / XHTML Form Interview Question
Question
Are the following all equal, and, if so, what would your code look like to make the
following all equal the same thing:
alert(document.forms["myform"].elements["field"].value);
alert(document.forms[1].elements[1].value);
alert(document.myform.field.value);
answer:
<form name="myform" method="post" action="something">
<input name="anything" value="anything" type="something" />
<input name="field" value="something" type="something" />
</form>
Answer includes knowing that the form is the second form on the page, and that the
field input element is the second element within that form.
Answer Rating
1. Doesn’t know how to code forms and doesn’t know that the first index of an array
is 0.
2. Knows either how to code forms with valid XHTML or that array starts at 0, but
not both.
3. Knows how to code forms but not correctly, but omits something like doesn’t
know that the form needs to be the second one on the page, and the element is the
second one in the form. Would know how to do it if they actually put thought into
it.
4. Codes the form correctly, but uses ID instead of name
5. Codes everything correctly
JavaScript Interview Question
Question:
How do you dynamically add a div with stylized content to a page?
Possible Answer:
newParagraph = document.createElement('p');
newParagraph.setAttribute('class', 'myClass');
newText = document.createTextNode('this is a new paragraph');
newParagraph.appendChild(newText);
myLocation = document.getElementById('parent_of_new_paragraph);
myLocation.appendChild(newParagraph);
Answer Rating:
1. Wrong Answer (i.e. "you can’t"), I don’t know.

2. Use JavaScript, with no knowledge or incomplete knowledge of how that is done.
Suggesting innerHTML, but not really knowing. Or explanation of accessibilty
issues surrounding this.
3. Able to explain how you create a node, add content to the node, add a class
attributes to that element, and then add that node as a child of the parent element
(the above example)
4. Explanation of how to do it (worth 3 points) and explanation as to issues that arise
when doing it, such as screen readers not knowing that text has changed, IE6 and
IE7 not applying styles included with added content, not duplicating IDs, etc.
5. Has no clue how to do it to start, but can figure it out with guidance: extra points
for the quick learner!
Other questions ideas:
Q: How do you organize your CSS? How do you come up with id and class names (what
naming conventions do you use)?
A: While there are no right answers, there are best practices. Issues to look for are not
having div mania, no inline CSS, no presentational markup, minimal use of classes,
understanding the CSS cascade.
Q: What do you think of hacks? When should you use them? If you use them, how do
you maintain them? What can be done to avoid needing to use box-model hacks? (if they
aren’t pros, you can ask them what is the issue with x-browsers and the box model)
Q: What are the pros and cons of using tables for layout? Do you use tables? What are
the pros and cons of tableless design? How do you generally layout your pages?
A: check for them NOT using tables
Q: Check to ensure that they separate structure and semantics first from presentation
later? Do not ask about this during HTML, but do in webstandards.
Q: What are some deprecated elements and attributes that you use, and in what instances
do you use them?
A: List of deprecated elements and attributes.
Q: What is involved in making a website accessible? What are arguments you use to
convince others to invest in making their web site accessible.
A: See Making the web Accessible. Making sites accessible also makes them more
search engine friendly (saves money), makes your pages accessible to the 20% of the
population that has some type of disability (so you can make more money) and it’s the
law in many places.
Q: Define what web standards mean to you? How do you implement web standards?
Q: In CSS, how can you make a form elments background-color change when the user is
entering text? will this work in all browsers?
Q: How can you target an element in your HTML using the DOM?

CSS Interview Questions and Answers Set

Uploaded by

Copyright:

Available Formats

CSS Interview Questions and Answers Set

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Interview Questions and Answers Set

Uploaded by

Copyright:

Available Formats

What is CSS?

What is CSS?

What are Cascading Style Sheets?

What are Cascading Style Sheets?

CSS Interview Questions And Answers

2. CSS is a web standard that describes style for XML/HTML documents.

<link rel="stylesheet" href="style.css"

What are Cascading Style Sheets?

How do I center block-elements with CSS1?

BODY {width: 30em; background: cyan;}

TABLE {margin-left: auto; margin-right: auto; width: 400px;}

What is external Style Sheet? How to link?

Is CSS case sensitive?

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

What are Style Sheets?

What is CSS rule 'ruleset'?

P {text-indent: 10pt} - CSS rule (ruleset)

See the bottom half of DTD: the Document Type Declaration

1. Completely wrong answer though pretends to know it

Accessibility Interview Question

Tell me some considerations in selecting font size?

1. uses <font> tag

CSS Interview Question

main values: none, block, inline, list-item, run-in

CSS Interview Question

a) What are the five possible values for "position"?

a) Values for position: static, relative, absolute, fixed, inherit

CSS Interview Question

Basic Javascript Interview Question

What is the correct way to include JavaScript into your HTML?

See Including Javascript in XHTML for answers.

1. <a href="javscript:function()"> - and other incorrect answers

Basic Javascript Array / XHTML Form Interview Question

JavaScript Interview Question

How do you dynamically add a div with stylized content to a page?

1. Wrong Answer (i.e. "you can’t"), I don’t know.

Other questions ideas:

You might also like