Set - 4

Question 11 :

What is shorthand property?

Answer :

Shorthand property is a property made up of individual properties that have a common "addressee". For example properties: font-weight, font-style, font-variant, font-size, font-family, refer to the font. To reduce the size of style sheets and also save some keystrokes as well as bandwidth they can all be specified as one shorthand property font, e.g.:

H1 {font-weight: bold;
font-style: italic; 
font-variant: small-caps;
font-size: 160%;
font-family: serif}

can be all shorthanded to a space separated list:

H1 {font: bold italic small-caps 160% serif}

Note: To make things even simpler the line-height property can be specified together with the font-size property:

H1 {font: bold italic small-caps 160%/170% serif}


Question 12 :

How to use CSS building a standards based HTML template?

Answer :

It should:
1. Contain: header, navigation, content, footer
2. Use well-structured HTML
3. Be error-free and encourage good coding

Let's start with number one there:

HTML document split up in four parts all with different meaning, use the 
-tag. Div is short for "division" and isn't header, navigation and so on ...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" 
content="text/html; charset=ISO-8859-1">
<title>Your own page title</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

<div id="header">
<h1>The name of this page</h1>
</div>
<div id="navigation">
<h2>Navigation</h2>
<ul>
<li><a href="first.html">First</a></li>
<li><a href="second.html">Second</a></li>
<li><a href="third.html">Third</a></li>
</ul>
</div>
<div id="content">
<h2>Content</h2>
<p>Some sample content, add your own here</p>
</div>
<div id="footer">
<p>This page is written by [Your name] and builds 
n a <a href="http://friendlybit.com">
Friendlybit template</a>.</p>
</div>

</body>
</html>
body {
    background-color: Green;
}
div {
    border: 3px solid Black;
    padding: 7px;
    width: 600px;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

#navigation {
    float: left;
    width: 150px;
}
#content {
    float: left;
    width: 430px;
}
#footer {
    clear: both;
}


Question 13 :

What is value?

Answer :

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}


Question 14 :

What is initial value?

Answer :

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


Question 15 :

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

Answer :

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.