HTML and CSS Interview Questions and Answers

Q. Can you have a DIV element nested inside a SPAN element?
A. It is a bad practice to have a DIV element nested inside a SPAN element. You can have a SPAN inside a DIV. The reason being the DIV is a block element and SPAN is an inline element. So, why would you want to have a block element inside an inline element? SPAN is a like sub tag, which applies styles for the specified content in-between the SPAN tag.

Q. How will you decide between using nested HTML table tags and a DIV tag with CSS?
A. Use DIV tags with CSS for laying out the web pages and use TABLE for representing data.

Tabular data represented using html table tag.

To layout web page elements

The traditional way of laying out web pages was to place them inside invisible tables as demonstrated below. This way of laying out is more complicated to do, harder to maintain and makes the web pages to load very slowly.

Bad: Laying out with nested TABLE tags and CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Table Layout</title>

<style type="text/css">
table {
 width: 100%;
 height: 1000px;
}

td.header {
 width: 100%;
 text-align: center;
 background-color: yellow;
}

td.contents {
 width: 80%;
 text-align: center;
 background-color: orange;
}

td.rhsmenu {
 width: 20%;
 text-align: center;
 background-color: green;
}

td.footer {
 width: 100%;
 text-align: center;
 background-color: blue;
}
</style>


</head>
<body>
 <table>
  <tbody>
   <tr height="15%">
    <td class="header" colspan="2">Header Information</td>
   </tr>
   <tr height="65%">
    <td class="contents">Contents go
     here</td>
    <td class="rhsmenu">RHS Panel</td>
   </tr>
   <tr height="20%">
    <td class="footer" colspan="2">Footer Information</td>
   </tr>
  </tbody>
 </table>

</body>
</html>

 The newer way to lay out your page elements is using DIVs and CSS. It can do everything tables can do and much more, and as an added bonus it loads a lot faster than tables ever did. It is easier to maintain, if you dont go overboard with nested DIVs. Use DIV for the conatainer and then use other elements SPAN, P, etc with CSS.

 Good: Laying out with DIVs and CSS tag

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Div Layout</title>

<!-- This can be defined outside in its own file and included into an html file -->
<style type="text/css">
body {
 display: block;
 width: 400px;
 height:400px;
 text-align: center;
}

/* main content container floated to the left*/
#content {
 position: relative;
 width: 80%;
 height: 65%;
 float: left;
 background-color: orange;
 width: 320px;
}

/* rhs menu container floated to the left*/
#rhs-menu {
 position: relative;
 width: 20%;
 height: 65%;
 float: left;
 background-color: green;
}

/* header container floated to the left*/
#header {
 position: relative;
 width: 100%;
 height: 15%;
 float: left;
 background-color: yellow;
}

/* footer with "clear"" to ensure that the footer is always below content and rhs-menu */
#footer {
 position: relative;
 width: 100%;
 height: 20%;
 clear: both;
 background-color: blue;
}

/* align text vertically*/
#content p,#rhs-menu p,#header p,#footer p {
 position: absolute;
 top: 50%;
 left: 50%;
 height: 50%;
 width: 50%;
 margin: -15% 0 0 -25%;
}

/* position the logo using absolute (from top left corner) or relative*/
.logo-text {
 position: absolute; 
 top: 5px;
 left: 10px;
}

</style>

</head>
<body>

 <div id="header"><span class="logo-text">logo goes here </span>
  <p>Header Information</p>
 </div>
 <div id="content">
  <p>Contents go here</p>
 </div>
 <div id="rhs-menu">
  <p>RHS Panel</p>
 </div>
 <div id="footer">
  <p>Footer Information</p>
 </div>

</body>
</html>

Note: It is a best practice to define HTML, CSS, and JavaScript in separate files. The CSS is combined with HTML in these examples for illustration purpose only.

The typical usecase for the "clear" css tag is when you want to put a footer at the bottom of your page, beneath the RHS menu and the content sections. So, by using the CSS tags like float, clear, absolute, relative, and display you can create attractive, maintainable, and faster layouts.

Read More..

Power of HTML CSS and jQuery collapsible CSS Table

It’s generally recommended you ensure the vast majority of your web page content is immediately visible when someone accesses it – but there are exceptions where you would want to display only the summarized view to not clutter up the page and expand to the details as and when required by clicking on a button or an icon. Here is a very simple tutorial on HTML, CSS, and jQuery that shows how to create a collapsible table. The following code snippet has embedded CSS with the style tag and jQuery with the script tag. The HTML defines the DOM (Document Object Model) structure. The CSS is used to hide and unhide the relevant rows. The jQuery is used to add and remove CSS styles.

Try using this example on Firefox with Firbug turned on or on Goggle chrome with the dEV tools turned on with the "F12" function key. This will enable you to inspect the HTML elements and the styles.

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>

</head>
<body>

<h1>demo for hiding and unhiding table rows </h1>

<button id="myappSummaryCollapse">
    <span class="collapse">Collapse</span>
    <span class="expand">Expand</span>
</button>

<table class="collapsible">
    <tr class="collapsible"><td>collapsible row</td></tr>
    <tr><td>not collapsible row</td></tr>
</table>


<script>

    jQuery(#myappSummaryCollapse).click(function () {
        var button = jQuery(this);
        var tables = jQuery(table.collapsible);

        if (button.hasClass(collapsed)) {
            button.removeClass(collapsed);
            for (var i = 0; i < tables.length; i++) {
                jQuery(tables[i]).removeClass(collapsed);
            }
        } else {
            button.addClass(collapsed);
            for (var i = 0; i < tables.length; i++) {
                jQuery(tables[i]).addClass(collapsed);
            }
        }
    });

</script>



<style>

    #myappSummaryCollapse .expand,
    #myappSummaryCollapse.collapsed .collapse,
    table.collapsed tr.collapsible {
        display: none;
    }

    #myappSummaryCollapse.collapsed .expand {
        display: inline;
    }

</style>


</body>
</html>

Very often, simple examples like the one above can clarify things to go on and do more complex scenarios. In the CSS, #myappSummaryCollapse is the element id and ".expand" is the style class name. "display:none" is used to hide and "display:inline" is used to display. The jQuery is used to add and remove the CSS classes.


Similar results can be achieved using JavaScript directly as shown below.

document.getElementById("p2").style.color="blue";

or

<button onclick="document.getElementById(id1).style.color=red" type="button">
</button>

But, jQuery selectors are very powerful and let you achieve similar results with less code.

Read More..