October 10, 2018

Sreekanth B

OpenText Most Frequently Asked Latest CSS Interview Questions Answers

What Is The Difference Between Id And Class?

ID identifies and sets style to one and only one occurrence of an element while class can be attached to any number of elements.

Can I Include Comments In My Style Sheet?

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.

Is There Anything That Can T Be Replaced By Style Sheets?

Quite a bit actually. Style sheets only specify information that controls display and rendering information. Virtual style elements that convey the NATURE of the content can not be replaced by style sheets, and hyperlinking and multimedia object insertion is not a part of style sheet functionality at all (although controlling how those objects appear IS part of style sheets functionality.) The CSS1specification has gone out of its way to absorb ALL of the HTML functionality used in controlling display and layout characteristics. For more information on the possible properties in CSS, see the Index DOT Css Property Index.

Rule of Thumb: if an HTML element or attribute gives cues as to how its contentsshould be displayed, then some or all of its functionality has been absorbed by stylesheets.
OpenText Most Frequently Asked Latest CSS Interview Questions Answers
OpenText Most Frequently Asked Latest CSS Interview Questions Answers

Why Is My External Stylesheet Not Working ?

There may be several different reasons behind that, but one very common mistake is to have an external stylesheet that contains HTML markup in some form.

An external stylesheet must contain only CSS rules, and if required, correctly formed CSS comments; never include any HTML syntax, such as <style type="text/css">…

CSS comments are defined as anything that is placed between

/* (the comment start mark) and

*/ (the comment end mark). I.e. as follows…

/* This text right here is a correct CSS comment */

CSS comments may span multiple lines in the stylesheet. Nesting of CSS comments is not allowed.

Another reason for external stylesheets (and even embedded and inline stylerules) not to function as expected may be that you have tried to make use of some CSS-features that are not supported in the browser you are using.

External stylesheets shall also be served from the www-server with a MIME-type of 'text/css' in its 'Content Type:' HTTP header.

You may need to negotiate with your server admin to add this MIME type to your server if you are not able to configure the server yourself.

How Do I Quote Font Names In Quoted Values Of The Style Attribute?

The attribute values can contain both single quotes and double quotes as long as they come in matching pairs. If two pair of quotes are required include single quotes in double ones or vice versa

<P STYLE="font-family: 'New Times Roman'; font-size: 90%">
<P STYLE='font-family: "New Times Roman"; font-size: 90%'>

It's been reported the latter method doesn't work very well in some browsers, therefore the first one should be used.

Which Property Is Used To Control The Position Of An Image In The Background?

The background-position property is used to control the position of an image in the background.

Which Property Is Used To Control The Scrolling Of An Image In The Background?

The background-attachment property is used to control the scrolling of an image in the background.

Which Property Is Used As A Shorthand To Specify A Number Of Other Background Properties?

The background property is used as a shorthand to specify a number of other background properties.

Which Property Is Used To Increase Or Decrease How Bold Or Light A Font Appears?

The font-weight property is used to increase or decrease how bold or light a font appears.

Which Property Is Used To Increase Or Decrease The Size Of A Font?

The font-size property is used to increase or decrease the size of a font.

What Does The Cascading In Cascading Style Sheets Mean?

Style Sheets allow style information to be specified from many locations. Multiple (partial) external style sheets can be referenced to reduce redundancy, and both authors as well as readers can specify style preferences.

In addition, three main methods can be employed by an author to add style information to HTML documents, and multiple approaches for style control are available in each of these methods. In the end, style can be specified for a single element using any, or all, of these methods.

Why Use Style Sheets?

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 sheetscan 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.

How Do I Get Rid Of The Gap Under My Image?

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>

Styles Not Showing?

There are different ways to apply CSS to a HTML document with a stylesheet, and these different ways can be combined

* inline (internal) (Deprecated for XHTML)
* embedded (internal)
* linked (external) and
* @import (external)

Note: An external stylesheet is a text file that contains only CSS Styles. HTML comments are not supposed to be in there and can lead to misinterpretation (> is the CSS "Child" selector!).

Are Style Sheets Case Sensitive?

No. Style sheets are case insensitive. Whatever is case insensitive in HTML is also case insensitive in CSS. However, parts that are not under control of CSS like font family names and URLs can be case sensitive - IMAGE.gif and image.gif is not the same file.

What Is Cascade?

Cascade is a method of defining the weight (importance) of individual styling rules thus allowing conflicting rules to be sorted out should such rules apply to the sameselector.

Declarations with increased weight take precedence over declaration with normal weight

P {color: white ! important} /* increased weight */
P (color: black} /* normal weight */

What Is Important Declaration?

Important declaration is a declaration with increased weight. Declaration with increased weight will override declarations with normal weight. If both reader's and author's style sheet contain statements with important declarations the author's declaration will override the reader's.

BODY {background: white ! important; color: black}

In the example above the background property has increased weight while the color property has normal.

Subscribe to get more Posts :