• +91 9971497814
  • info@interviewmaterial.com

Computer Interview Questions Answers

CSS Interview Questions Answers

Question - 71 : - Can I attach more than one declaration to a selector?

Answer - 71 : - Yes. If more than one declaration is attached to a selector they must appear in a semi colon separated list, e.g.; Selector {declaration1; declaration2} P {background: white; color: black}   Border around a table? Try the following: .tblboda { border-width: 1px; border-style: solid; border-color: #CCCCCC; } /*color, thickness and style can be altered*/ You put this style declaration either in an external stylesheet, or you can stuff it in the <head></head> section, like: <style type="text/css"> (here you can place your styles) </style> and apply it to the table as follows: <div class="tblboda"> <table yaddayadda> <tr> <td>Content text and more content</td> </tr> </table> </div> That should give you a grey thin border around this table. If you want the border to 'shrink wrap' around the table, then you have to use the <span> tag instead the tag. But that is not quite proper CSS or HTML, because a is for inline elements. A table is not an inline element, therefore the correct tag is a <div>. If you play around with it a bit then you have a good chance to achieve what you want and still have correct HTML/CSS. The other way would be that you apply the class .tblboda directly to the table (for IE and other contemporary browsers), like <table ... class="tableboda"> and you define another class for each stylesheet: .tblboda2 In the NN4.xx stylesheet, you use the same properties as above, and in the IE and other contemporary browsers you carefully set all those properties to default, like {border-style: none;} Then you wrap the table in the <div> with the class .tblboda2 (NN4.xx does that) (IE a.o.c.b. don't do anything, because the border-style is set to "none" = no border at all). This way you have a table that is wrapped in a nice little border: .tblboda2 for NN4.xx, .tblboda for IE and other modern browsers.

Question - 72 : - Why shouldn't I use fixed sized fonts ?

Answer - 72 : - Only in very rare situations we will find users that have a "calibrated" rendering device that shows fixed font sizes correct. This tells us that we can never know the real size of a font when it's rendered on the user end. Other people may find your choice of font size uncomfortable. A surprisingly large number of people have vision problems and require larger text than the average. Other people have good eyesight and prefer the advantage of more text on the screen that a smaller font size allows. What is comfortable to you on your system may be uncomfortable to someone else. Browsers have a default size for fonts. If a user finds this inappropriate, they can change it to something they prefer. You can never assume that your choice is better for them. So, leave the font size alone for the majority of your text. If you wish to change it in specific places (say smaller text for a copyright notice at the bottom of page), use relative units so that the size will stay in relationship to what the user may have selected already. Remember, if people find your text uncomfortable, they will not bother struggling with your web site. Very few (if any) web sites are important enough to the average user to justify fighting with the author's idea of what is best.

Question - 73 : - How do you override the underlining of hyperlinks?

Answer - 73 : - CSS has the ability to explicitly control the status of underlining for an element - even for hyperlinks. The correct way to do this in an external or document-level style sheet is:    A { text-decoration: none } and within an anchor element as:    <a HREF="example.htm" STYLE="text-decoration: none">link text</a> Note: The underlining of hyperlinks is a long-standing visual convention that assists in the visual identification of active hyperlink areas. Many users expect to see hyperlinks underlined and may be confused and/or irritated if they are not used. User-defined style sheets address this user need by allowing the user to have final control over this feature. Unfortunately, wide support for this ability does not yet exist.

Question - 74 : - How can I specify two different sets of link colors?

Answer - 74 : - By classifying each set of links and then attaching desired color to each set. CSS: <style type="text/css"> <!-- A.set1:link {color: some_color; background: some_background_color} A.set1:visited {color: some_color; background: some_background_color} A.set1:active {color: some_color; background: some_background_color} A.set2:link {color: some_color; background: some_background_color} A.set2:visited {color: some_color; background: some_background_color} A.set2:active {color: some_color; background: some_background_color} --> </style> 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).

Question - 75 : - How do I have a background image that isn't tiled?

Answer - 75 : - 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;}

Question - 76 : - What is wrong with font-family: "Verdana, Arial, Helvetica"?

Answer - 76 : - The quotes. This is actually a list with a single item containing the well-known 'Verdana, Arial, Helvetica' font family. It is probably intended to be a list of three items. Unlike in most other CSS1 properties, values for the font-family are separated by a comma to indicate that they are alternatives. Font names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the font name are ignored and any sequence of whitespace characters inside the font name is converted to a single space. So to ask for two fonts foo and bar the syntax is: font-family: foo, bar To ask for the two fonts Revival 555 and Iodine you can do this: font-family: "Revival 555", Iodine You could also do this: font-family: Revival 555, Iodine which is equivalent. Notice that this is not three fonts; you can tell because after the "l" you didn't hit a comma, (more list items to come) a semicolon (end of that property, another property coming up) or a curly brace (end of that rule). This is also equivalent: font-family: Revival 555, Iodine ^^^^^^ whole bunch of spaces converts to one space But this next one is asking for a different font with two spaces in the name font-family: "Revival 555", Iodine ^^two spaces, which are not converted In general it is more tolerant of user typing to leave out the quotes. Sometimes you need them, for example there is a real font sold by Fontworks and designed in 1995 by Stephan Müller called Friday, Saturday, Sunday. Yes, two commas in the actual font name. CSS1 can handle this: font-family: "Friday, Saturday, Sunday", cursive Because it can handle this, the example in the title is syntactically correct. But what the author or tool wrote was almost certainly not what the document author intended.

Question - 77 : - How can I make a page look the same in e.g. NS and MSIE ?

Answer - 77 : - The simple answer is, you can't, and you shouldn't waste your time trying to make it exactly the same. Web browsers are allowed, per definition, to interpret a page as they like, subject to the general rules set down in the HTML and CSS specifications. As a web author you can not have a prior knowledge of the exact situation and/or medium that will be used to render your page, and it's almost always rather counterproductive to try to control that process. There is no necessity for a well-written page to look the same in different browsers. You may want to strive to ensure that it looks good in more than one browser, even if the actual display (in the case of graphical browsers) comes out a bit different. "Looking good" can be achieved by adopting sensible design and guidelines, such as not fixing the size or face of your fonts, not fixing the width of tables, etc… Don't fight the medium; most web users only use one browser and will never know, or bother to find out, that your page looks different, or even "better", in any other browser.

Question - 78 : - CSS is clearly very useful for separating style from content. But apparently people tend to have problems when using it for layouts. Would you say this is because people have not yet understood how to properly do layout in CSS, or is it CSS that is lacking in this area? What can be done to improve the situation? --- Would the web benefit from HTML and CSS being complemented with some kind of "layout language"?

Answer - 78 : - Layout and style should be tackled by the same language and the two are intertwined. Trying to split the two is like splitting the HTML specification in two, one specification describing inline elements and the other describing block elements. It's not worth the effort. CSS is capable of describing beautiful and scalable layouts. The CSS Zen Garden has been a eye-opening showcase of what is possible today. If MS IE had supported CSS tables, another set of layouts would have been possible. So, there is still lots of potential in the existing CSS specifications which should be the next milestone. I always wanted to have "included" substyles or "aliases" in my CSS definition, to save redundancy. (For includes) .class1 { color:#ff0000; } .class2 { background-color:#ffffff; } .class3 { include:class1,class2;font-weight:bold; } (For aliases) @alias color1 #ff0000; @alias color2 #ffffff; @alias default_image url('/img/image1.jpg'); .class1 { color:color1; } .class2 { background-image:default_image;background-color:co lor2; } This way we could change colors or images for a whole webpage by editing a reduced number of lines.

Question - 79 : - What are inline, block, parent, children, replaced and floating elements?

Answer - 79 : - Inline elements which do not have line breaks. Can occur in block elements or other inline elements, cannot contain block elements. Inline elements in HTML 3.2; EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, TT, I, B, U, STRIKE, BIG, SMALL, SUB, SUP, A, IMG, APPLET, FONT, BASEFONT, BR, SCRIPT, MAP, INPUT, SELECT, TEXTAREA. Inline elements in HTML 4.0; EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, ACRONYM, TT, I, B, BIG, SMALL, SUB, SUP, A, IMG, OBJECT, BR, SCRIPT, MAP, Q, SPAN, BDO, INPUT, SELECT, TEXTAREA, LABEL, BUTTON, (INS, DEL). Inline elements in HTML 4.0 Transitional; EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, ACRONYM, TT, I, B, U, S, STRIKE, BIG, SMALL, SUB, SUP, A, IMG, APPLET, OBJECT, FONT, BASEFONT, BR, SCRIPT, MAP, Q, SPAN, BDO, IFRAME, INPUT, SELECT, TEXTAREA, LABEL, BUTTON, (INS, DEL). Block elements which do have line breaks. May occur in other block elements, cannot occur in inline elements, may contain both block and inline elements. Block elements in HTML 3.2; H1, H2, H3, H4, H5, H6, ADDRESS, P, DL, DT, DD, UL, OL, DIR, MENU, LI, DIV, CENTER, BLOCKQUOTE, PRE, HR, ISINDEX, TABLE, FORM. Block elements in HTML 4.0; P, H1, H2, H3, H4, H5, H6, UL, OL, PRE, DL, DIV, NOSCRIPT, BLOCKQUOTE, FORM, HR, TABLE, FIELDSET, ADDRESS, (INS, DEL). Block elements in HTML 4.0 Transitional; P, H1, H2, H3, H4, H5, H6, UL, OL, DIR, MENU, PRE, DL, DIV, CENTER, NOSCRIPT, NOFRAMES, BLOCKQUOTE, FORM, ISINDEX, HR, TABLE, FIELDSET, ADDRESS, (INS, DEL). Parents and children elements which either contain (parents) or are in the content of (children) other elements, e.g. <P>text<STRONG>text</STRONG>text</P>. P is a parent of STRONG. STRONG is a child of P. If not specified otherwise, children will inherit parent's properties. Replaced elements which content is replaced. For example content of the IMG element is replaced with an image, content of the INPUT element is replace with a field. Floating elements which follow the flow of a parent - inline elements.

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

Answer - 80 : - 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.  

Computer Contributors

Rajeev Katiyar
Yes Baroda

Share your email for latest updates


Our partners