X20d: CSS Anatomy

1. Explain the structure of HTML documents





2. Differentiate between block and in-line HTML
elements






3. Identify the parts of this CSS rule: 
h1, h2 {font-family: Verdana, Arial, Helvetica; color: blue;} 






4. Differentiate between selectors for elements, classes, and
IDs;







5. Differentiate between classes, IDs, pseudo-classes, and
pseudo-elements;







The Dao of the Web
(http://www.alistapart.com/articles/dao/)

1. John Allsopp wrote, "The web's greatest strength, I believe,
is often seen as a limitation, as a defect." What is this
"greatest strength", and what does he suggest the role of Web
designers should be with regard to it?







2. John Allsopp wrote, "The journey begins by letting go of
control, and becoming flexible." What is the journey to which
Allsopp is referring, and why does he feel it is necessary to let
go of control?








Give me Pixels or Give me Death
(http://old.alistapart.com/stories/fear4/)

1. Jeffrey Zeldman writes, "If you wish to control your web
typography with CSS (and why wouldn't you wish to do that?),
there are only two things that always work." What are those two
things?












ANSWERS
-------

1. A "tree", based on HTML tags, is constructed by the user agent 
(browser) to represent the organization of an HTML page. A tree is 
a hierarchical data structure that allows very rapid and effective 
use of computer resources.	[X20dA1]

2. 
§	Block elements can contain (some) other block elements and  inline elements; 
§	Inline elements can contain only other inline elements. 
§	If putting in the tags causes a new line to be started, it's probably a block 
element. [X20dB1]

3. h1	element 
	h1, h2 	selector 
	color:	property 
	blue	value 
	{font-family: Verdana, Arial, Helvetica; color: blue;}	declaration 
		[X20dC1]

4. §	Elements are HTML tag names
	§	Classes begin with a dot "." and allow styles to be applied to 
		any HTML element
	§	IDs begin with a hash-mark "#" and define styles which can be 
		used only once in a document
		[X20dD1]

5. §	classes	apply a style to any HTML element; begin with a dot  "."
	§	IDs	used to identify a part of a page that occurs only once; 
		begin with a hash-mark "#" §	pseudo-classes	used only for links; 
		begin with "a:" 
	§	and pseudo-elements	define a style for the first line or first 
		letter of an element; the element name is followed by either ":first-line" 
		or ":first-letter". (Not widely implemented) 
		[X20dE1]

The Dao of the Web

1. It is the nature of the web to be flexible, and it should be
our role as designers and developers to embrace this flexibility,
and produce pages which, by being flexible, are accessible to
all.	[DaoWeb1]

2. It is the journey of good Web design. Letting go of control is
necessary in order to take advantage of what Allsopp calls "the
Web's greatest strength" - its flexibility...	[DaoWeb2]


Give me Pixels or Give me Death

1. Use pixels (not points, not ems, not percentages, not
keywords) to specify your font sizes. Or: 2.	Use nothing. Do not
specify font sizes at all, and let the browser's stylistic
defaults and the visitor's preferences take care of the relative
size relationships. [PixelsOrDeath1]