b) What is the default value for the display attribute for the image element?

(what is the
difference between inline and block level elements)

default value: inline, block or list-item, depending on the element. The <img> is an inline
element.

CSS Display - Block and Inline Elements

A block element is an element that takes up the full width available, and has a line break before and
after it. Examples of block elements:

 <h1>
 <p>
 <div>

An inline element only takes up as much width as necessary, and does not force line breaks. Examples
of inline elements:

 <span>
 <a>

-------------------------------------------------------------------------------------------------------------

d) Difference between “visibility: hidden” and “display: none”? What are the pros and cons of
using display: none?

Hiding an Element - display: none or visibility: hidden

Hiding an element can be done by setting the display property to "none" or the visibility property to
"hidden". However, notice that these two methods produce different results:

visibility: hidden hides an element, but it will still take up the same space as before. The element will
be hidden, but still affect the layout.

Pros: Very easy to do

Cons:

 You are still loading the components on the server side and the client will download them.
The browser will simply not "show" them.
 Anyone using "view source" will be able to see the values that are "hidden". so never use it
to hide sensitive information.

--------------------------------------------------------------------------------------------------------------

a) What are the possible values for the display attribute that are supported by all browsers?

main values: none, block, inline, list-item, run-in

Value Description
none The element will not be displayed
block The element will be displayed as a block-level element, with a line
break before and after the element
inline The element will be displayed as an inline element, with no line break
before or after the element
list-item The element will be displayed as a list
run-in The element will be displayed as block-level or inline element
depending on context
compact The element will be displayed as block-level or inline element
depending on context
marker This value sets content before or after a box to be a
marker. Note: This value should only be used with :before and :after
pseudo-elements. Otherwise this value is identical to "inline"
table The element will be displayed as a block table (like <table>), with a
line break before and after the table
inline-table The element will be displayed as an inline table (like <table>), with no
line break before or after the table
table-row-group The element will be displayed as a group of one or more rows (like
<tbody>)
table-header-group The element will be displayed as a table header row (like <thead>)
table-footer-group The element will be displayed as a table footer row (like <tfoot>)
table-row The element will be displayed as a table row (like <tr>)
table-column-group The element will be displayed as a group of one or more columns (like
<colgroup>)
table-column The element will be displayed as a column of cells (like <col>)
table-cell The element will be displayed as a table cell (like <td> and <th>)
table-caption The element will be displayed as a table caption (like <caption>)

c) What does display: run-in do?

Run-in should make the run-in element be the first line of the next sibling block level element,
if it is before a block level element that is not floated or absolutely positioned. If the next
sibling is positioned or floated, then the run-in element will be a block level element instead of
appearing in-line.

The element will generate a block or inline box, depending on context

a) What are the five possible values for “position”?

Values for position:

Static : HTML elements are positioned static by default. A static positioned element is always
positioned according to the normal flow of the page. Static positioned elements are not affected by
the top, bottom, left, and right properties.
Relative: A relative positioned element is positioned relative to its normal position
Absolute: An absolute position element is positioned relative to the first parent element that has a
position other than static. Absolutely positioned elements are removed from the normal flow. The
document and other elements behave like the absolutely positioned element does not exist. Absolutely
positioned elements can overlap other elements .The z-index property specifies the stack order of an
element (which element should be placed in front of, or behind, the others).An element can have a
positive or negative stack order
Fixed: An element with fixed position is positioned relative to the browser window.
Inherit: Specifies that the value of the position property should be inherited from the parent element
b) What is the default/initial value for “position”?

static

c) How does the browser determine where to place positioned elements

They are placed relative to the next parent element that has absolute or relative value declared

d) What are the pros and cons of using absolute positioning?

Absolutely positioned elements are removed from the document flow. The positioned element
does not flow around the content of other elements, nor does their content flow around the
positioned element. An absolutely positioned element may overlap other elements, or be
overlapped by them.

e) IE z-index issues with positioned elements

 IE treats a position like a z-index reset, so you have to declare position of static on the parent
element containing the z-indexed elements to have them respond to z-index correctly.

f) Write a snippet of CSS that will display a paragraph in blue in older browsers, red in newer
browsers, green in IE6 and black in IE7

#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}

How do you organize your CSS? How do you come up with id and class names (what naming
conventions do you use)?
  Never use layout descriptives in class names. Rather, use functional names for your
classes, avoid words that describe how they look or where they are located on the page.
“mainnavigation” is better than “leftnavigation”. Use “.copyright” and “.pullquote” instead
of “smallgrey” or “indentitalic”. Name classes/IDs based on function, not appearance. If
you create a .smallblue class, and later get a request to change the text to large and red,
the class stops making any form of sense. Instead use descriptive classes like
 Always use intention revealing classnames: Its tempting to use short cryptic class names
(.s, .lbl) but unless you keep a glossary up to date of your class names, you will forget
what they do. You may also run into problems with older browsers that can occasionally
confuse classnames that start the same (i.e. .err and .errors are sometimes confused)

 Avoid using the same classname for different purposes. The cascade can be very
powerful but sometimes there is a temptation to use the same generic classname in
many places. If you don’t sandbox your Css well, you can run into troubles.
 Always use the same classname for similar purposes: Becuase the cascade is so
powerful, you should reuse a classname in different places when they represent the
same concept.
 Put your classname on the outer-most element. The child elements can be targeted with
the parent elements classname or ID. Often you see things like: <div
class="headertitle">...</div>
<div class="headerdescription">...</div>
<div class="headerlinks">...</div>

It’s far better to write:

<div id="header">
<h3>...</h3>
<p>...</p>
<ul><li>...</li><ul>
</div>

 Although class and div names can include lowercase, uppercase, numbers and
additional characters in class and div names, it is best to use all lower case letters and
to for multiple word classes, separate the words with an underscore or use camel case.
HTML attributes “id” and “class” are case sensitive!
 Never use javascript method or property names as ID
values.  JavaScript DOM  bindings specifies that javascript can index by id. For example,
using “length” as an ID value on an element will cause headaches when using
myObjects.length.

Box-model : padding, margins, Borders, content

 choosing the right unit type for layout: advantages and disadvantages
Unit Advantages Disadvantages

 Best suited to creating highly precise  Fractional units might expand or

layout grids in two dimensions
 When used in relation to document
em containers, makes possible layouts that
expand or contract according to the size of
body copy
 The computed dimensions of
elements become easily predictable
 Best suited to completely flexible
layouts
 Easiest for creating things like equal
percentage
columns
 Offers the greatest amount of control
px over layout
 Eliminates most cross-browser
variation in layout
Q: What are the pros and cons of using tables for layout? Do you use tables? What are the pros
and cons of tableless design? How do you generally layout your pages?
contract with slight differences
between browsers
 To achieve the best results, all font-
sizeand line-height values in the
document should be set to explicit and
predictable values
 Blowout avoidance might require
extra container elements
 Might result in unacceptably wide
or narrow elements
 Results are highly dependent on
context (see discussion of the box
models below)
 Most ill-suited to accessibility and
cross-media support requirements
 Most susceptible to blowouts

Pros and Cons

 Tables-based layouts
o Pro: Some people are used to working with tables-based layouts.
o Pro: Older web editors, such as Microsoft FrontPage, display tables-based layouts
better in the design editor view.
o Con: Tables are no longer recommended for layout by current web standards.
o Con: Tables-based layouts can be less optimized for search engines.
o Con: Tables-based layouts often involve more code and increase bandwidth.
o Con: Tables-based layouts do not allow for global design updates the way CSS does.
 CSS layouts
o Pro: CSS layouts are recommended by current web standards.
o Pro: Because the layout definitions are centralized in a stylesheet, global design
changes are easier to make.
o Pro: By separating the layout and design from the actual content of a page, the page
code can be more optimized for search engines.
o Pro: CSS layouts usually result in more streamlined code, decreasing bandwidth.
o Con: Some older editors such as Microsoft FrontPage do not display CSS layouts
properly in the Design View. While it is still possible to work with older editors, the user will have to
get used to working in Split View and refreshing frequently in a browser instead of depending on
the Design preview.
o Con: As with any technology, there is a learning curve for CSS. Developers who are
used to using tables may not want to invest the time to switch over to CSS.
 Q: What are some deprecated elements and attributes that you use, and in what instances do
you use them?

Deprecated HTML Elements in HTML 4.01 and XHTML 1.0

 <applet></applet>
The applet element has been deprecated in favor of the <object></object> tag.
 <basefont />
The basefont element has been deprecated in favor of the CSS font and colorproperties.
 <blackface></blackface>
The blackface element is a MSNTV/WebTV element that has been deprecated in favor of the
CSSfont-weight property.
 <blockquote></blockquote>
The blockquote element is deprecated in favor of CSS properties like margin when used to indent
text.
 <center></center>
The center element has been deprecated in favor of using CSS to center elements.
 <dir></dir>
The dir element has been deprecated in favor of the <ul></ul> tag.
 <embed />
The embed element has been deprecated in favor of the <object></object> tag. This tag was
reinstated in HTML 5.
 <font></font>
The font element has been deprecated in favor of the font and color style properties.
 <i></i>
The i element has been deprecated in favor of the CSS font-style property.
 <isindex />
The isindex element has been deprecated in favor of the input tag.
 <layer></layer>
The layer element has been deprecated in favor of CSS positioning.
 <menu></menu>
The menu element has been deprecated in favor of the <ul></ul> tag.
 <noembed></noembed>
The noembed element has been deprecated in favor of the <object></object> tag.
 <s></s>
The s element has been deprecated in favor of the text-decoration CSS property.
 <shadow></shadow>
The shadow element is a MSNTV/WebTV element that has been deprecated in favor of the text-
shadow style property.
 <strike></strike>
The strike element has been deprecated in favor of the text-decoration CSS property.
 <u></u>
The strike element has been deprecated in favor of the text-decoration CSS property.

Deprecated HTML Attributes in HTML 4.01 and XHTML 1.0

 alink
The alink attribute defines the color of an active link on the web page. It has been deprecated in
favor of the color style property assigned to the:active pseudo-class.
 align
Used to align elements vertically and horizontally on the document page, the align attribute has
been deprecated in favor of the float CSS style property.
 background
The background attribute is used to define a background image for the element. It has been
deprecated in favor of the background-image style property.
 border
Used to define a border around the element, the border attribute has been deprecated in favor of
the border style property.
 color
Used to define the color of the enclosed text, the color attribute has been deprecated in favor of
the color property.
 compact
The compact attribute is used in list tags to create a list that takes up less space. It has been
deprecated in favor of the list-style property.
 face
Used to define the font face of the enclosed text, the face attribute has been deprecated in favor of
the font-family CSS style property.
 height
Used to define the height of the element, the height attribute has been deprecated in favor of
the height CSS property.
 language
The language attribute is used to define the language used by the script element. It has been
deprecated in favor of the type attribute.
 link
The link attribute defines the color of a link on the Web page. It has been deprecated in favor of
the color style property assigned to the :link pseudo-class.
 name
The name attribute names the element for use with dynamic content, it has been deprecated in
favor of the id attribute.
 noshade
The noshade attribute removes the 3-D effect from horizontal rules. It has been deprecated in
favor of style sheets.
 nowrap
Used to stop table contents from wrapping, the nowrap attribute has been deprecated in favor of
the white-space style property.
 size
Used to define the size of the enclosed text, the size attribute has been deprecated in favor of font-
size CSS property.
 start
The start attribute of list tags defines the starting number of the list. This attribute has been
deprecated in favor of the list-style-type property.
 text
The text attribute defines the color of the text on the Web page. It has been deprecated in favor of
the color style property.
 type
The type attribute of list tags defines what type of list should be used. This attribute has been
deprecated in favor of the list-style-type property.
 value
The value attribute of list tags sets the value of the list item. This attribute has been deprecated in
favor of the list-style CSS property.
 version
The version attribute defines the version of HTML used by the document. It has been deprecated in
favor of defining the DOCTYPE.
 vlink
The vlink attribute defines the color of a visited link on the Web page. It has been deprecated in
favor of color style property assigned to the :visited pseudo-class.
 width
The width attribute defines the width in pixels of the element. It has been deprecated in favor of
the width property.
 How to Avoid Deprecated HTML

Fonts and CSS

Font and text styles have been deprecated in HTML in favor of CSS, and this is where CSS really
shines. CSS supports more options for changing font attributes than the deprecated tags it is
replacing. If you are still using these tags instead of CSS you're making a huge mistake.

 <basefont>
You can change the color, face, and size of the fonts on your Web page with CSS. Create a base
font for your body and paragraph tags with the following CSS:
body, p {
   font: 1em Geneva;
   color: #000;
}
This will create a page with a 1em black Geneva font.

 <blackface> (WebTV)
In WebTV/MSNTV browsers the blackface tag makes the text double-weight bold. This is easy with
CSS:
.blackface { font-weight: bolder; }
Not all browsers support the bolder designation, but they will all turn it bolder than the surrounding
text.

 <font>
Just like base font, you can specify the font face, color, and size with CSS. You can also define the
background color behind the font, the line-height of the font, and the tracking of the font:
body, p {
   font: 1em Geneva;
   color: #000;
   background-color: #ccc;
   line-height: 1.2em;
   letter-spacing: .2em;
}

Text Attributes

Some of these aren't deprecated (like <b> and <i>) but it is still possible, and often better to use
style sheets for them. These affect how the text will look, not just details about the font.

 <b>
Bold text is created with the font-weight property in CSS.
.bold { font-weight: bold; }
 <i>
Italic text is created with the font-style property in CSS.
.italics { font-style: italic; }
 <shadow> (WebTV)
The shadow tag in WebTV creates a drop-shadow on the text. There is a CSS 2 property to support
shadows, but currently it's not supported by any browser.
.shadow { text-shadow: .2em .2em #ccc; }
 <strike>
You can do more than strike-through your text with CSS. Use the text-decoration property to do
even more.
.strike { text-decoration: line-through; }

Affect More than Text and Fonts

But CSS fixes more than just text and fonts. You can also do things like indenting, centering, and
layering with CSS properties.

 <blockquote> to indent text

You shouldn't indent with the blockquote tag. That tag is only for long quotations.
.indentall { margin: 15px; }
.indentleft { margin-left: 15px; }
 <center>
Centering in CSS is a bit trickier, because you can only center inline content. Block content you
need to center in a different way.
.center { text-align: center; }
 <layer>
Layers are the trickiest because there isn't a specific property to replace them. Instead, you should
define the styles of your elements and then move them around withpositioning CSS properties. Use
the z-index property to move your elements higher or lower in the stack order.
.onTop { z-index: 100; }
.onBottom { z-index: 0; }

Differences between HTML and XHTML

The primary benefit is that XHTML is more widely accepted in non "computer" devices like cell
phone, palm devices and other scaled down browsers. This is commonly called portability
between devices.
XHTML is also said to be extensible: new tags can be added. Also, XHTML, due to it’s stricter
nature, forces the developer to write cleaner code (yes, that is a ver good thing).

Here are "official" differences between XHTML and HTML:

 In XHTML the elementy tags must all be in lower case as must all the attribute names. In
HTML you can code willy-nilly. Nothing in the W3C states that attribute values need to
be lowercase, but some, like ID, are case sensitive. 
Note: Even if you have declared a HTML doctype, all lowercase, while not required, is
recommended.
 In XHTML all attribute values must be encased in single or double quotes. In HTML, only
attribute values with spaces or special characters were required to be in quotes.
 In XHTML, every opening tag must have a closing tag. Empty elements such as img and
br must be self-closing. In HTML tags can be left unclosed. So, while this reduces the
number of characters on a page, it also allows for sloppy code.
Note: Self closing tags, such as <br />, will cause strict HTML to not validate.
 In XHTML, all tags must be properly nested: If you start tag <a> and then start
tag <strong>, you must close tag </strong>before you close the </a>
 In XHTML, all attributes must be coded as attribute/value pairs. The default selected
option in XHTML should be writtenselected="selecterd". In HTML, the same would
simply be coded as selected.
 In XHTML, the elements need to be coded in a semantic manner. Tables and forms can
not be included in paragraphs, but form elements, being inline elements, need to be
contained within a semantic block level element, such as a paragraph or table cell.