• +91 9971497814
  • info@interviewmaterial.com

Computer Interview Questions Answers

CSS Interview Questions Answers

Question - 101 : - How do I center block-elements with CSS1?

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

Question - 102 : - Why use Style Sheets?

Answer - 102 : - Style sheets allow a much greater degree of layout and display control than has ever been possible thus far in HTML. The amount of format coding necessary to control display characteristics can be greatly reduced through the use of external style sheets which can be used by a group of documents. Also, multiple style sheets can be integrated from different sources to form a cohesive tapestry of styles for a document. Style sheets are also backward compatible - They can be mixed with HTML styling elements and attributes so that older browsers can view content as intended.

Question - 103 : - How do  I eliminate the blue border around linked images?

Answer - 103 : - in your CSS, you can specify the border property for linked images: a img { border: none ; } However, note that removing the border that indicates an image is a link makes it harder for users to distinguish quickly and easily which images on a web page are clickable.

Question - 104 : - Which browsers support CSS?

Answer - 104 : - It depends on your definition of "support." If you are interested in those browsers which makes some attempt at supporting CSS, no matter how partial or bug-ridden, then the list is: * Internet Explorer 3.0 and above * Navigator 4.0 and above * Opera 3.6 and above * Konqueror * Arena * Emacs-w3 * Amaya * Lexicon * XPublish by Media Design in·Progress If instead you're interested in those browsers which are known to do a credible job of bug-free and mostly completel support for CSS1, then the list narrows somewhat dramatically: * Internet Explorer 5.0 for Macintosh and above * Internet Exporer 5.5 for Windows and above * Netscape Navigator 6.0 and above * Opera 4.0 and above While none of these browser can be claimed to have a perfect implementation of CSS1, they are all quite good and can be relied upon to operate in a consistent fashion for most of CSS1.

Question - 105 : - How do I have a non-tiling (non-repeating) background image?

Answer - 105 : - With CSS, you can use the background-repeat property. The background repeat can be included in the shorthand background property, as in this example: body { background: white url(example.gif) no-repeat ; color: black ; } 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

Question - 106 : - How does inheritance work?

Answer - 106 : - HTML documents are structured hierarchically. There is an ancestor, the top level element, the HTML element, from which all other elements (children) are descended. As in any other family also children of the HTML family can inherit their parents, e.g. color or size. By letting the children inherit their parents a default style can be created for top level elements and their children. (Note: not all properties can be inherited). The inheritance starts at the oldest ancestor and is passed on to its children and then their children and the children's children and so on. Inherited style can be overridden by declaring specific style to child element. For example if the EM element is not to inherit its parent P then own style must be declared to it. For example: BODY {font-size: 10pt} All text will be displayed in a 10 point font BODY {font-size: 10pt} H1 {font-size: 14pt} or H1 {font-size: 180%} All text except for the level 1 headings will be displayed in a 10 point font. H1 will be displayed in a 14 point font (or in a font that is 80% larger than the one set to BODY). If the element H1 contains other elements, e.g. EM then the EM element will also be displayed in a 14 point font (or 180%) it will inherit the property of the parent H1. If the EM element is to be displayed in some other font then own font properties must be declared to it, e.g.: BODY {font-size: 10pt} H1 {font-size: 14pt} or H1 {font-size: 180%} EM {font-size: 15pt} or EM {font-size: 110%} The EM element will be displayed in a 15 point font or will be 10% larger than H1. NOTE: EM is, in this example, inside H1 therefore will inherit H1's properties and not Body's. The above declaration will display all EM elements in 15 point font or font that is 10% larger than font declared to the parent element. If this specific font is to apply to EM elements but only if they are inside H1 and not every occurrence of EM then EM must take a form of a contextual selector. H1 EM {font-size: 15pt} or H1 EM {font-size: 110%} In the example above EM is a contextual selector. It will be displayed in specified font only if it will

Question - 107 : - What are pseudo-elements?

Answer - 107 : - Pseudo-elements are fictional elements that do not exist in HTML. They address the element's sub-part (non-existent in HTML) and not the element itself. In CSS1 there are two pseudo-elements: 'first-line pseudo-element' and 'first-letter pseudo-element'. They can be attached to block-level elements (e.g. paragraphs or headings) to allow typographical styling of their sub-parts. Pseudo-element is created by a colon followed by pseudo-element's name, e.g: P:first-line H1:first-letter and can be combined with normal classes; e.g: P.initial:first-line First-line pseudo-element allows sub-parting the element's first line and attaching specific style exclusively to this sub-part; e.g.: P.initial:first-line {text-transform: uppercase} <P class=initial>The first line of this paragraph will be displayed in uppercase letters</P> First-letter pseudo-element allows sub-parting the element's first letter and attaching specific style exclusively to this sub-part; e.g.: P.initial:first-letter { font-size: 200%; color: red} <P class=initial>The first letter of this paragraph will be displayed in red and twice as large as the remaining letters</P> As a developer who works with CSS every day, I find one complication that continues to bother me in my daily work. Support for CSS has always been good on the horizontal scope, but vertical positioning has always been quite complicated. Alone the procedure to affix a footer to the bottom of a screen in dependance of the amount of content is unnecessarily difficult. The old table method provided much easier methods for this. What are your thoughts on this and do you see improvement following in future CSS revisions? Indeed, the CSS formatting model allows more control horizontally than vertically. This is due to (typically) having a known width, but an unknown height. As such, the height is harder to deal with. However, CSS2 fixed positioning allows you to place content relative to the viewport (which is CSS-speak for window) instead of the document. For example, by setting position: fixed; bottom: 0 on an element, it will stick to the

Question - 108 : - How do I write my style sheet so that it gracefully cascades with user's personal sheet ?

Answer - 108 : - You can help with this by setting properties in recommended places. Style rules that apply to the whole document should be set in the BODY element -- and only there. In this way, the user can easily modify document-wide style settings.

Question - 109 : - Had you considered any of these ideas in the past? If so, why were they rejected?

Answer - 109 : - Yes, aliases and constants have been considered. CSS is already an indirection. Instead of putting properties and values directly on elements, it associates properties and values with selectors. What you (and others) are proposing is to add another layer of indirection. By doing so, one could possible write shorter, more manageable style sheets. However, there are also some downsides. It requires a new syntactic construct (@alias) and implementations must be able to remember a list of aliases. What if aliases are defined in one style sheet and referenced in another -- should that work? If so, what if the first style sheet isn't available?..

Question - 110 : - What is initial value?

Answer - 110 : - Initial value is a default value of the property, that is the value given to the root element of the document tree. All properties have an initial value. If no specific value is set and/or if a property is not inherited the initial value is used. For example the background property is not inherited, however, the background of the parent element shines through because the initial value of background property is transparent. <P style="background: red">Hello <strong>World </strong> </P> Content of the element P will also have red background

Computer Contributors

Rajeev Katiyar
Yes Baroda

Share your email for latest updates


Our partners