CSS Interview Questions and Answers

Started by Kalyan, Jan 10, 2009, 07:23 PM

previous topic - next topic
Go Down

Kalyan

CSS Interview Questions and Answers

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:


type="text/css">

The line should be placed in between your and 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

This paragraph will be red

This paragraph will be blue

This paragraph will be green

# This list item will be green


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}

This paragraph has three classes attached

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.

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.

source : interviewquestionsadda

Kalyan

How do you show which page you're on (in a menu)?

If PHP is not available to you, you could use the cascade. Put an id in your body tags and an id in each of your 'a' tags for the links.
Let's say on page one you have this:

CSS

page one

In your CSS, you can have something like this:

CSS
#page1 a#page1link {
color:purple;

How can I specify two different sets of link colors?

By classifying each set of links and then attaching desired color to each set.

CSS:

You can name set1 and set2 any way you like as long as the names are made up of letters 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.
Note: to avoid conflict with user's settings a background property (background color) should also be specified together with the color property (foreground color).

How can I place multiple blocks next to each other?

In theory, the following will produce 4 "columns":
Block 1

Block 2

Block 3

Block 4


Each "column" will occupy 25% of the screen. This relies on a correct implementation of float, which cannot be said of many legacy browsers. If you cannot accept display variances in older browsers, then it may be best to fall back to table-based solutions.

2. By making the block an inline element and then use text-align property

This technique depends on the incorrect implementation of text-align behavior in older browsers. It will likely cease to work in future CSS-conformant browsers, and eventually it will probably not be a viable solution.

Document Style Semantics and Specification Language (DSSSL)?

Document Style Semantics and Specification Language is an international standard, an expression language, a styling language for associating processing (formatting and transformation) with SGML documents, for example XML.

What is Extensible Stylesheet Language (XSL)?

XSL is a proposed styling language for formatting XML (eXtensible Markup Language) documents. The proposal was submitted to the W3C by Microsoft, Inso, and ArborText.

Which font names are available on all platforms ?

The simple answer is "None" which is why CSS offers five generic font names as 'serif', 'sans-serif', 'cursive', 'fantasy' and 'monospace'. Never put any of these generic font names in quotes.

A CSS aware browser should make a suitable choice from the available fonts in response to each of those generic names.
Specifying any other font name in a www environment comes out as a suggestion only, that may or may not be acknowledged by a browser.

The problem with using names of specific fonts is that there is little point in naming fonts that few users will have, so you're down to listing a few mass-market font names. This will then override any superior selection that a minority of discerning readers may have made for themselves.

Note also that fonts may differ in their character repertoire, but this is often not evident from the font name itself: by selecting an inappropriate font name, you might prevent internationalized content from displaying correctly for a proportion of users.


Why does Netscape lose my styles ?

Netscape 4.x has poor support for CSS. Having said that, the following points should be noted.

Invalid HTML will almost certainly cause Netscape to ignore your CSS suggestions at some point. You will find that valid HTML is your best friend, but for Netscape to work properly you must ensure that all elements in your markup which permit closing tags are explicitly closed.

Check and correct your CSS suggestions for the very same reason, Netscape 4.x is in fact doing "the right thing", as per CSS specs (as opposed to MSIE) when it ignores style rules with errors.

Netscape 4.x has what's called an "inheritance problem" into its TABLE element. It can be argued that NS is all within its right to behave as it does in this case, but since the workaround is quite simple it's easy enough to just use it and be done with it.
Let's say you want your TABLE content to "look the same" as your BODY content? "Redundant" styling comes to your help as in e.g. BODY, TABLE, TH, TD { /* insert your styles here */

On a generic level, Netscape 4.x likes to have style rules applied directly to the elements where they are needed. You can never really trust the inheritance principle to work correctly at any level in Netscape 4.x.

Why is it my ':hover' declaration for links does not work ?

Assuming you have already checked that your style sheet declarations do conform to correct CSS syntax, it could be that you have overlooked the importance of a correct order of style declarations for links.
The CSS2 specification makes this following note on the importance of placing the dynamic pseudo-classes ':hover' and ':active' in correct positions in a list of style declarations.
Note that the 'a:hover' must be placed after the 'a:link' and 'a:visited' rules, since otherwise the cascading rules will hide the 'color' property of the 'a:hover' rule.

Similarly, because 'a:active' is placed after 'a:hover', the active color will apply when the user both activates and hovers over the 'a' element.

source : interviewquestionsadda

Kalyan

How do you show which page you're on (in a menu)?

If PHP is not available to you, you could use the cascade. Put an id in your body tags and an id in each of your 'a' tags for the links.

Let's say on page one you have this:

CSS

page one

In your CSS, you can have something like this:

CSS
#page1 a#page1link {
color:purple;

How can I specify two different sets of link colors?
By classifying each set of links and then attaching desired color to each set.

CSS:


You can name set1 and set2 any way you like as long as the names are made up of letters 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.

Note: to avoid conflict with user's settings a background property (background color) should also be specified together with the color property (foreground color).

How can I place multiple blocks next to each other?
In theory, the following will produce 4 "columns":
Block 1

Block 2

Block 3

Block 4


Each "column" will occupy 25% of the screen. This relies on a correct implementation of float, which cannot be said of many legacy browsers. If you cannot accept display variances in older browsers, then it may be best to fall back to table-based solutions.

2. By making the block an inline element and then use text-align property

This technique depends on the incorrect implementation of text-align behavior in older browsers. It will likely cease to work in future CSS-conformant browsers, and eventually it will probably not be a viable solution.

Document Style Semantics and Specification Language (DSSSL)?

Document Style Semantics and Specification Language is an international standard, an expression language, a styling language for associating processing (formatting and transformation) with SGML documents, for example XML.

What is Extensible Stylesheet Language (XSL)?

XSL is a proposed styling language for formatting XML (eXtensible Markup Language) documents. The proposal was submitted to the W3C by Microsoft, Inso, and ArborText.

Which font names are available on all platforms ?

The simple answer is "None" which is why CSS offers five generic font names as 'serif', 'sans-serif', 'cursive', 'fantasy' and 'monospace'. Never put any of these generic font names in quotes.

A CSS aware browser should make a suitable choice from the available fonts in response to each of those generic names.
Specifying any other font name in a www environment comes out as a suggestion only, that may or may not be acknowledged by a browser.

The problem with using names of specific fonts is that there is little point in naming fonts that few users will have, so you're down to listing a few mass-market font names. This will then override any superior selection that a minority of discerning readers may have made for themselves.

Note also that fonts may differ in their character repertoire, but this is often not evident from the font name itself: by selecting an inappropriate font name, you might prevent internationalized content from displaying correctly for a proportion of users.

Why does Netscape lose my styles ?

Netscape 4.x has poor support for CSS. Having said that, the following points should be noted.

Invalid HTML will almost certainly cause Netscape to ignore your CSS suggestions at some point. You will find that valid HTML is your best friend, but for Netscape to work properly you must ensure that all elements in your markup which permit closing tags are explicitly closed.

Check and correct your CSS suggestions for the very same reason, Netscape 4.x is in fact doing "the right thing", as per CSS specs (as opposed to MSIE) when it ignores style rules with errors.

Netscape 4.x has what's called an "inheritance problem" into its TABLE element. It can be argued that NS is all within its right to behave as it does in this case, but since the workaround is quite simple it's easy enough to just use it and be done with it.
Let's say you want your TABLE content to "look the same" as your BODY content? "Redundant" styling comes to your help as in e.g. BODY, TABLE, TH, TD { /* insert your styles here */ }

On a generic level, Netscape 4.x likes to have style rules applied directly to the elements where they are needed. You can never really trust the inheritance principle to work correctly at any level in Netscape 4.x.

Why is it my ':hover' declaration for links does not work ?

Assuming you have already checked that your style sheet declarations do conform to correct CSS syntax, it could be that you have overlooked the importance of a correct order of style declarations for links.

The CSS2 specification makes this following note on the importance of placing the dynamic pseudo-classes ':hover' and ':active' in correct positions in a list of style declarations.

Note that the 'a:hover' must be placed after the 'a:link' and 'a:visited' rules, since otherwise the cascading rules will hide the 'color' property of the 'a:hover' rule.

Similarly, because 'a:active' is placed after 'a:hover', the active color will apply when the user both activates and hovers over the 'a' element.

Kalyan

Justified Text?

You redefine the

tag like:

p {text-align: justify;}

and that renders all

s with justified text.

Another possibility is to define a class, like:

.just {text-align: justify;}

and then you style the paragraphs in question like:

text

Note that NN 4.xx has problems with the inheritance of styles; that some NN4.xx browsers have a funny way to interpret "justify"; and that you have to have at least one blank space between the last character and the
tag, because otherwise NN 4.xx likes to justify even a three word half-sentence... also, some browsers do a pretty ugly job of rendering justified text, adding spaces between words, instead of spaces between letters, as with word-processing programs.

Why can @import be at the top only?
A style sheet that is imported into another one has a lower ranking in the cascading order: the importing style sheet overrides the imported one. Programmers may recognize this as the same model as in Java, Modula, Object-Pascal, Oberon and other modular programming languages.

However, there is a competing model, well-known to C programmers, where the imported material is not lower in rank, but is expanded in-place and becomes an integral part of the importing document.

By allowing @import only at the top of the style sheet, people that think in terms of the second model (although in principle incorrect) will still get the expected results: as long as the @import is before any other overriding rules, the two models are equivalent.

Btw. In all the modular languages import statements are only allowed at the top. In C, the #include can be put elsewhere, but in practice everybody always puts it at the top. So there may not be that much need to allow @import elsewhere in the style sheet either.

Colored Horizontal Rule?
You can apply styles to Horizontal Rules in IE without problems, but NN4.xx can only render the silvery HR. But there is a way around it:

.rule {border-top-width: 1px;
border-top-style: solid;
border-color: #FF0000;
margin: 0px 2%;}

that, applied to a div, should give you a red HR in NN4.xx and IE, with a 2% gap on the left and right side.

CSSharky Logo
On this page is an Example of a coloured 'Horizontal Rule'.
Update:
Thanks to Matt Del Vecchio here is an improved format for the Horizontal Rule:

hr { height:0px;
border:0px;
border-top:1px solid #ff1493; }

....this works in both IE and Netscape. It tells the browser to not render the hr rule itself, and then sets a 1px border, which looks just how most folks want to render the hr rule. It uses the element and that is better than writing your own class as all devices will know what to do with an tag.

Do URL's have quotes or not?
Double or single quotes in URLs are optional. The tree following examples are equally valid:

BODY {background: url(pics/wave.png) blue}
BODY {background: url("pics/wave.png") blue}
BODY {background: url('pics/wave.png') blue}

To what are partial URLs relative?
Partial URLs are relative to the source of the style sheet. The style sheet source can either be linked or embedded. To which source partial URLs are relative to depends on their occurrence.
If a partial URL occurs in a linked style sheet then it is relative to the linked style sheet. The URL of the linked style sheet is the URL of the directory where the sheet is kept.

If a partial URL occurs in an embedded style sheet then it is relative to the embedded style sheet. The URL of the embedded style sheet is the URL of the HTML document in which the sheet is embedded.
Note that Navigator 4.x treats partial URLs as being relative to the HTML document, regardless of the place where the partial URL occurs. This is a serious bug which forces most authors to use absolute URLs in their CSS.

What's the difference between 'class' and 'id'?

As a person, you may have an ID card - a passport, a driving license or whatever - which identifies you as a unique individual. It's the same with CSS. If you want to apply style to one element use 'id' (e.g.
). In the stylesheet, you identify an 'id' with a '#' ie. '#myid'...

As a person, if you are in a class, you are one of many. It's the same with CSS. If you want to apply the same style to more than one element, use 'class'

(e.g.). In the stylesheet, you identify a 'class' with a '.' ie. '.myclass'.

If id's are more restrictive than classes, then why not just litter your page with classes? Well, I think the main thing is that it's simply wrong. You don't put headings in 'p' tags - you use 'h1', 'h2', etc. You don't (or shouldn't) make a list by writing asterisks or the little divider bar ( | ) - you use list tags ('ol'/'ul' + 'li') .

You don't say that your footer is part of a class of elements called 'footer' - that's just stupid - you can't have more than one footer - it can't be a class. Of course, practically, the effect is about the same - the rules are applied - but that's not the point - it's semantically wrong to do it that way... However, if you try to give more than one element the same id, you will have problems - so don't do it.

An element may have an id and a class, but that's usually not necessary. You can also give an element two classes if you need to - like this : class="class1 class2". It can be very useful. Needless to say, you can't give an element two id's.
Another difference is to do with power. You can give an element an id and a class, but if any of the properties of the two conflict, the id style will win. Ids are more powerful than classes.

One more useful thing about id's is that they can be used as a link reference. Many people still think that you need named anchors to make links within a page, but that's simply not true - in fact, the name attribute is deprecated in XHTML except for in forms. One example of using id's as link references is this page. There are no named anchors on this page - the questions at the top of the page link to the id's of the divs that the answers are in.

I made a 10px-high div, but IE makes it 20px high...

This problem sometimes comes up when you make a div just to contain the bottom border of a box, or something like that. In this situation, there's no text in the div, but IE won't let the height of the div be smaller than the line-height (which usually depends on the font-size). The answer is to set the font-size to zero.
CSS
#thediv {
font-size:0;
}

How do I place two paragraphs next to each other?
There are several ways to accomplish this effect, although each has its own benefits and drawbacks. We start with the simplest method of positioning two paragraphs next to each other.

Paragraph 1

Paragraph 2


Trickier is this example, which relies on positioning but does not suffer the vertical-overlap problems which plague many other positioning solutions. The problem is that it relies on an incorrect positioning implementation, and will break down dramatically in conformant browsers.

source : interviewquestionsadda

Go Up
 

Quick Reply

With Quick-Reply you can write a post when viewing a topic without loading a new page. You can still use bulletin board code and smileys as you would in a normal post.

Warning: this topic has not been posted in for at least 120 days.
Unless you're sure you want to reply, please consider starting a new topic.

Note: this post will not display until it's been approved by a moderator.
Name:
Email:
Verification:
Please leave this box empty:

Type the letters shown in the picture
Listen to the letters / Request another image

Type the letters shown in the picture:

shortcuts: alt+s submit/post or alt+p preview
IT Acumens Web Designing Chennai | GinGly :: Build your Personal Website | CineBuzz :: Cinema News | My Kids Diary :: Gift your Kids Memories :: Book Website @ 349 Rs monthly
Copyright © 2005 - 2021 :: IT Acumens :: All Rights Reserved. :: XML Sitemap
ITAcumens Discussion Forum with 2 lakhs post running for 15 years - Powered by IT Acumens Pro Dedicated Server

My Kids Diary