HCL Job Interview Questions -Css

What is value?

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}

What is initial value?

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

How frustrating is it to write a specification knowing that you're at the browser vendors' mercy?

That's part of the game. I don't think any specification has a birthright to be fully supported by all browsers. There should be healthy competition between different specifications. I believe simple, author-friendly specifications will prevail in this environment.

Microformats are another way of developing new formats. Instead of having to convince browser vendors to support your favorite specification, microformats add semantics to HTML through the CLASS attribute. And style it with CSS.

How far can CSS be taken beyond the web page--that is, have generalized or non-web specific features for such things as page formatting or type setting?

Yes, it's possible to take CSS further in several directions. W3C just published a new Working Draft which describes features for printing, e.g., footnotes, cross-references, and even generated indexes.

Another great opportunity for CSS is Web Applications. Just like documents, applications need to be styled and CSS is an intrinsic component of AJAX. The "AJAX" name sounds great.

How To Style Table Cells?

Margin, Border and Padding are difficult to apply to inline elements. Officially, the <TD> tag is a block level element because it can contain other block level elements (see Basics - Elements).

If you need to set special margins, borders, or padding inside a table cell, then use this markup:

<td>

yourtext </div></td>

to apply the CSS rules to the div inside the cell. </p>

How To Style Forms?

Forms and form elements like SELECT, INPUT etc. can be styled with CSS - partially.

Checkboxes and Radiobuttons do not yet accept styles, and Netscape 4.xx has certain issues, but here is a tutorial that explains the application of CSS Styles on Form Elements.

How do I get my footer to sit at the bottom.?

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>

Can I attach more than one declaration to a selector?

Yes. If more than one declaration is attached to a selector they must appear in a semi colon separated list,

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.

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

Kindly Bookmark and Share it: