• +91 9971497814
  • info@interviewmaterial.com

Computer Interview Questions Answers

CSS Interview Questions Answers

Question - 31 : - How does a simple CSS style rule look ?

Answer - 31 : - P { font-family: serif; font-size: 1.2em; } Here we see a rule with a 'selector' P that has been given two style declarations, i.e. two 'property:value' pairs. 'font-family' and 'font-size' are properties of the content of element P , and these properties are assigned the values of 'serif' and '1.2em' respectively. A colon ':' is the value assignment symbol in CSS, so using an equal sign '=' instead is an error and is required by the CSS specification to be ignored. Any browser that appears to honor this style is behaving improperly. For length values a 'unit' is always needed and there shall never be any space between a number and its length unit. A value given as e.g. '1.2 em' is an error and is required by the CSS specification to be ignored. Any browser that appears to honor this style is behaving improperly. A semicolon ';' between declarations is required but it's also good "rule of thumb" to put a ';' even after the last declaration. Finally, curly braces '{…}' group one or more declarations into a final CSS rule.

Question - 32 : - How do you make a tool tip that appears on hover?

Answer - 32 : - The most simple way is to use the 'title' attribute like this... HTML <span title="Example of the title attribute in use">like this</span> CSS a.tooltip { position:relative; cursor:help; } a.tooltip span { display: none; position:absolute; top:1.5em; left:0; width:15em; padding:0 2px; } a.tooltip:hover { display:inline; } a.tooltip:hover span { display:block; border:1px solid gray; background-color:white; } HTML <a class="tooltip" href="#n">Karl Marx<span>-info goes here-</span></a> Without this part... a.tooltip:hover { display:inline; } ..it won't work in IE. The "#n" in the link is to prevent the page from jumping to the top if the link is clicked. The "href" part is necessary as it won't work in IE without it.

Question - 33 : - What is value?

Answer - 33 : - Value is a 'physical' characteristic of the property. Property declares what should be formatted, e.g. FONT while value suggests how the property should be formatted, e.g. 12pt. By setting the value 12pt to the property FONT it is suggested that the formatted text be displayed in a 12 point font. There must always be a corresponding property to each value or set of values. H1 {font: bold 180%} In the example above the H1 selector is declared the FONT property which in its turn is declared the values BOLD and 180%. The values suggesting alternatives are specified in a comma separated list, e.g. H1 {font-family: font1, font2}

Question - 34 : - Can I include comments in my Style Sheet?

Answer - 34 : - Yes. Comments can be written anywhere where whitespace is allowed and are treated as white space themselves. Anything written between /* and */ is treated as a comment (white space). NOTE: Comments cannot be nested.

Question - 35 : - What is inline style? How to link?

Answer - 35 : - Inline style is the style attached to one specific element. The style is specified directly in the start tag as a value of the STYLE attribute and will apply exclusively to this specific element occurrence. <P STYLE="text-indent: 10pt">Indented paragraph</P>

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

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

Question - 37 : - What is property?

Answer - 37 : - Property is a stylistic parameter (attribute) that can be influenced through CSS, e.g. FONT or WIDTH. There must always be a corresponing value or values set to each property, e.g. font: bold or font: bold san-serif.

Question - 38 : - Colored Horizontal Rule?

Answer - 38 : - You can apply styles to Horizontal Rules <HR> 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 <hr> element and that is better than writing your own class as all devices will know what to do with an <hr> tag.

Question - 39 : - How do I make my div 100% height?

Answer - 39 : - You need to know what the 100% is of, so the parent div must have a height set. One problem that people often come up against is making the main page fill the screen if there's little content. You can do that like this : CSS body, html { height:100%; } body { margin:0; padding:0; } #wrap { position:relative; min-height:100%; } * html #wrap { height:100%; } Here, the #wrap div goes around your whole page - it's like a sub-body. You need to use 'min-height' rather than 'height' for Firefox because otherwise it will set it to 100% of the viewport and no more. Internet Explorer, being well... crap, treats 'height' as it should be treating 'min-height' which it doesn't recognise. (You can target IE by preceding your code with ' * html '). To make floated divs within this #wrap div 100% of the #wrap div... well that's more difficult. I think the best way is to use the 'faux columns' technique which basically means that you put the background in your body rather than your columns. If the body has columns and your floats don't then it looks like your floated content is in a column that stretches to the bottom of the page. I've used this technique in my layout demos. The problem is often not that the columns aren't 100% height, but that they're not equal lengths. Columns usually don't start from the top of the page and end at the bottom - there's often a header and a footer or sometimes, more interesting designs don't have a recognisable columnar layout, but do require div boxes to be equal heights. This can be done with the aid of a couple of images and some css or with some javascript.

Question - 40 : - How do I get my footer to sit at the bottom...?

Answer - 40 : - Need a div which makes space at the bottom of the main page (inside the #wrap div). Then, the footer (being inside #wrap) can be placed in that space by using absolute positioning. Like this : CSS body, html { height:100%; } body { margin:0; padding:0; } #wrap { position:relative; width:780px; margin:auto; min-height:100%; } * html #wrap { height:100%; } #clearfooter { height:50px; overflow:hidden; } #footer { position:absolute; bottom:0; width:100%; height:50px; } HTML <div id="wrap"> ...content goes here... <div id="clearfooter"></div> <div id="footer">Footer</div> </div>

Computer Contributors

Rajeev Katiyar
Yes Baroda

Share your email for latest updates


Our partners