• +91 9971497814
  • info@interviewmaterial.com

Computer Interview Questions Answers

CSS Interview Questions Answers

Question - 1 : - How can I place multiple blocks next to each other?

Answer - 1 : - In theory, the following will produce 4 "columns": <DIV style="float: left; width: 25%;">Block 1</DIV> <DIV style="float: left; width: 25%;">Block 2</DIV> <DIV style="float: left; width: 25%;">Block 3</DIV> <DIV style="float: left; width: 25%;">Block 4</DIV> 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 <DIV STYLE="text-align: center"> <TABLE STYLE="display: inline"> ... </TABLE> </DIV> 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.

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

Answer - 2 : - 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 - 3 : - Can Style Sheets and HTML stylistic elements be used in the same document?

Answer - 3 : - Yes. Style Sheets will be ignored in browsers without CSS-support and HTML stylistic elements used.

Question - 4 : - Which characters can CSS-names contain?

Answer - 4 : - The CSS-names; names of selectors, classes and IDs 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. The names cannot start with a dash or a digit. (Note: in HTML the value of the CLASS attribute can contain more characters).

Question - 5 : - What does \ABCD (and \ABCDE) mean?

Answer - 5 : - CSS allows Unicode characters to be entered by number. For example, if a CLASS value in some Russian document contains Cyrillic letters EL PE (Unicode numbers 041B and 041F) and you want to write a style rule for that class, you can put that letter into the style sheet by writing: .\041B\041F {font-style: italic;} This works on all keyboards, so you don't need a Cyrillic keyboard to write CLASS names in Russian or another language that uses that script. The digits and letters after the backslash (\) are a hexadecimal number. Hexadecimal numbers are made from ordinary digits and the letters A to F (or a to f). Unicode numbers consist of four such digits. If the number starts with a 0, you may omit it. The above could also be written as: .\41B\41F {font-style: italic;} But be careful if the next letter after the three digits is also a digit or a letter a to f! This is OK: .\41B-\41F, since the dash (-) cannot be mistaken for a hexadecimal digit, but .\41B9\41F is only two letters, not three. Four digits is the maximum, however, so if you write: .\041B9\041F {font-style: italic;}  

Question - 6 : - What are Cascading Style Sheets?

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

Question - 7 : - How do I get rid of the gap under my image?

Answer - 7 : - Images are inline elements, which means they are treated in the same way as text. Most people kind of know this - they know that if you use 'text-align:center' on an image it will be centred. What many people don't realise is that this means you will have a gap underneath an image. This gap is for the descenders of letters like j,q,p,y and g. To get rid of this gap you need to make the image block-level - like this : CSS img {display:block;} One problem that this can cause is when you want to have a few images next to each other - if they are block-level, they won't be next to each other. To get around that, you can use float:left. Of course, this might present another problem - maybe you don't want the image to float left. In this case, you can use an unordered list like this : CSS ul, li { list-style-type:none; padding:0; margin:0 auto; } ul { width:150px; } li { float:left; } HTML <ul> <li><img src="wine.jpg" height="50" width="50" alt="wine" /></li> <li><img src="wine.jpg" height="50" width="50" alt="wine" /></li> <li><img src="wine.jpg" height="50" width="50" alt="wine" /></li> <li><img src="wine.jpg" height="50" width="50" alt="wine" /></li> <li><img src="wine.jpg" height="50" width="50" alt="wine" /></li> <li><img src="wine.jpg" height="50" width="50" alt="wine" /></li> <li><img src="wine.jpg" height="50" width="50" alt="wine" /></li> <li><img src="wine.jpg" height="50" width="50" alt="wine" /></li> <li><img src="wine.jpg" height="50" width="50" alt="wine" /></li> </ul>

Question - 8 : - What is ID selector?

Answer - 8 : - ID selector is an individually identified (named) selector to which a specific style is declared. Using the ID attribute the declared style can then be associated with one and only one HTML element per document as to differentiate it from all other elements. ID selectors are created by a character # followed by the selector's 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. #abc123 {color: red; background: black} <P ID=abc123>This and only this element can be identified as abc123 </P>

Question - 9 : - Why call the subtended angle a "pixel", instead of something else (e.g. "subangle")?

Answer - 9 : - In most cases, a CSS pixel will be equal to a device pixel. But, as you point out, the definition of a CSS pixel will sometimes be different. For example, on a laser printer, one CSS pixel can be equal to 3x3 device pixels to avoid printing illegibly small text and images. I don't recall anyone ever proposing another name for it. Subangle? Personally, I think most people would prefer the pragmatic "px" to the non-intuitive "sa".

Question - 10 : - What are pseudo-classes?

Answer - 10 : - Pseudo-classes are fictional element types that do not exist in HTML. In CSS1 there is only one element type which can be classed this way, namely the A element (anchor). By creating three fictional types of the A element individual style can be attached to each class. These three fictional element types are: A as unvisited link, A as active link and A as visited link. Pseudo-classes are created by a colon followed by pseudo-class's name. They can also be combined with normal classes, e.g.: A:link {background: black; color: white} A:active {background: black; color: red} A:visited {background: transparent; color: black} <A HREF....>This anchor (or rather these anchors) will be displayed as declared above</A> A.foot:link {background: black; color: white} A.foft:active {background; black: color: red} A.foot:visited {background: transparent; color: black} <A CLASS=foot HREF....>This anchor and all other anchors with CLASS foot will be displayed as declared above</A>

Computer Contributors

krishan
Rajeev Katiyar
Yes Baroda

Share your email for latest updates

Name:
Email:

Our partners