1. Hot To Specify the Content Box Size of a Block Element?

If you want to control the size of the content box of a block element, you can use the "width" and "height" properties as shown below:

* {width: 300px} - Specifies the content box to be 300px wide.
* {height: 200px} - Specifies the content box to be 200px high.

The HTML and CSS document below shows you a good example of how to specify content box size of on a <P> tag:

2. What Is a Floating Element in CSS?

A floating element is a block element or in-line element being specified with the "float" style property. If "float: left" is specified, a floating element will be formatted at the left margin of the parent element. The current block and sub sequent blocks will be floated on the right side of this floating element.
If "float: right" is specified, a floating element will be formatted at the left margin of the parent element. The current block and sub sequent blocks will be floated on the right side of this floating element.

Below is a good example of a floating block element and a floating inline element:

3. What Is Inline Element in CSS?

An inline element is formatted as a rectangular block joining other inline elements horizontally to form a line of inline elements. If the width of the parent content box is reached, it will be wrapped to start a new line. One or more lines of in-line elements become a block element. Examples of inline elements are:

► <IMG> - A tag to insert an image into the current line.
► <STRONG> - A tag to make the text stronger.
► <EM> - A tag to emphasize the text
► <INPUT> - A tag to allow user entering input data to a form.
► <SPAN> - A container to group inline elements into a unit.
► <A> - A tag to create a hyper link.
► <BR> - A tag to break the current line.

4. What Is a Block Element in CSS?

A block element is formatted as a rectangular block occupying the entire width of the parent content box. Examples of block elements are:

► <P> - A paragraph of text and/or inline elements.
► <PRE> - A paragraph of text with white spaces preserved.
► <LI> - A list item. Identical to <P; except that it has list-item marker on the left.
► <TABLE> - A table of cells. Each cell is identical to <P>
► <FORM> - An input form. Identical to <P> except that it has no margins.
► <DIV> - A container to group elements into a block element.
► <H1/H2/H3...> - A title line. Identical to <P> except that it has different margins and font size
► <HR> - A horizontal ruler.

5. What Are the Formatting Behaviors of HTML Elements?

From a formatting behavior point of view, HTML elements can be divided into 2 categories:

► Block Element - Formatted as a rectangular block occupying the entire width of the parent content box. For example, <P> is block element.
► Inline Element - Formatted as a rectangular block joining other inline elements horizontally to form a line of inline elements. If the width of the parent content box is reached, it will be wrapped to start a new line. One or more lines of in-line elements become a block element. For example, <IMG> is an inline element.

6. What Is the HTML Element Formatting Model in CSS?

An HTML document is divided into HTML elements. Each element is considered as a formatting unit using a box-oriented formatting model, which has:

► Content Box - A rectangular area for displaying the element content.
► Padding Box - A rectangular area surrounding the content box acting as padding space.
► Border Box - A rectangular area surrounding the padding box acting as border lines.
► Margin Box - A rectangular area surrounding the border box acting as margin space.

7. How To Use IDs to Override Classes in CSS?

Class is a nice way to separate a group of tag instances. To identify one or two special instances, you can use the ID attributes and ID selectors. In the CSS example below, the ID selector "P#hot" wins over all other selectors, so the third row in the table will be in red:

8. How To Use Class Selectors to Differentiate Tag Instances in CSS?

A more reliable way to identify tag instances is to use the class attributes and class selectors. In the CSS example below, class="url" is added to <P> tags for Web addresses, with a new CSS definitions using a class selector "P.url". All three selectors match the Web address text, but the class selector "P.url" wins because of the cascading order rules. So you will see Web addresses in bold "sans-serif":

9. How To Set Different Text Fonts Inside Tables in CSS?

If want to set the text font inside tables different than outside tables, you can use CSS definitions with contextual selectors. In the CSS example below, Both selectors "TABLE P" and "P" match those <P> tags inside the table, but the contextual selector "TABLE P" wins the tag selector "P" based on the cascading order rules. So you will see text inside the table in blue "serif":

<html><head>
<title>CSS Included</title>
<style type="text/css">
/* matches P instances inside TABLE only */
TABLE P {margin-top: 0px; margin-left: 20px;
font-family: serif; font-size: 12pt; color: blue}

/* matches all instances of tag P */
P {font-family: arial; font-size: 14pt; color: black}
</style>
</head><body>
<p>Welcome to www.GlobalGuideLine.com resource listings:<br>
<table>
<tr><td><p>www.w3.org - W3 home page.<p></td></tr>
<tr><td><p>www.php.net - PHP home page.<p></td></tr>
<tr><td><p>www.google.com - Google search.<p></td></tr>
</table>
</body></html>

10. How To Remove the Top White Space of Your Web Page using CSS?

The top white space of your Web page is provided by the browser's default CSS definition of the margin-top property on the BODY tag. You can remove this white space by adding your own margin-top definition. Because of the cascading order rules, your definition wins over the default definition. Here is a CSS example:

<html><head>
<title>CSS Included</title>
<style type="text/css">
BODY {margin-top: 0px}
BODY {background-color: white}
P {font-family: arial; font-size: 12pt; color: black}
</style>
</head><body>
<p>Welcome to GlobalGuideLine.com.<br>
This paragraph should appear right below the top edge
of the browser window without any white space.</p>
</body></html>

Download Interview PDF