Robin Nixon [Robin Nixon] - CSS & CSS3: 20 Lessons to Successful Web Development: 20 Lessons to Successful Web Development [ENHANCED EBOOK]

Once again I would like to thank the amazing team at McGraw-Hill Education, with whom it is always a real pleasure to work on new book projects. In particular, I would like to thank my Sponsoring Editor Brandi Shailer, Amanda Russell for overseeing the projects development, Editorial Supervisor Jody McKenzie, Production Supervisor Jean Bodeaux, Copy Editor Megha Saini, and Jeff Weeks for the excellent cover design. Thanks also goes again to Albert Wiersch (whom I have had the pleasure of working with on a number of occasions) for his meticulous eye for detail during technical review.

T his appendix contains the answers to all the questions posed at the end of the lessons in this book. To ensure you have understood everything, try to refrain from checking these answers until you have attempted to answer all the questions in a lesson.

If you dont know an answer, try to find it in the book before you look here if you can, as this will help you to remember it next time.

HTML is based on the Document Object Model (DOM).

The main purpose of style sheets is to enable the separation of content from styling in web documents.

The outermost object in the DOM is the browser window (which can also be a tab, iframe, or pop-up window).

The two main sections of an HTML document are the head and the body.

In the head of a document you will typically find the title, meta elements, style sections, and sometimes scripts.

CSS rules are often placed between

and tags in the head of a document.

To import an external style sheet into the style section of an HTML document, you use the @import directivefor example: @importurl(styles.css);.

An external style sheet can be imported into the HTML of a web document using the

tagfor example:.

A CSS style can be directly applied to an element by assigning a value to its style attributefor example:

.

A CSS class can apply to multiple HTML elements, whereas an ID may apply only to a single element.

A CSS selector is the element or group of elements being selected by a rule for styling. Selectors may include element types, IDs, or classes.

You use { and } symbols to contain the rules that are to apply to one or more selectors.

In CSS rules, a colon is used to separate properties and valuesfor example: color:green;.

A semicolon is not required after the final rule in a set, or if there is only one rule, but because rules are often copied, pasted, and moved, it is recommended to always place a semicolon after all rules.

To apply more than one CSS rule to a selector, separate them with semicolons. They do not have to be on separate lines, but can be for readability.

To give the ID of item1 to an element, assign it to the elements id attributefor example:

.

To give the class news to an element, assign it to the elements class attributefor example:

.

To mark a section of CSS as a comment, enclose it within /* and */ tags. You may also use the // tag to comment out to the end of a line, but it is not a recommended standard.

Ignoring default and user styles, the main types of CSS rules are external style sheets, internal styles in a

section, and inline styles assigned to an elements style attribute.

To set the font size for

In CSS and HTML, IDs are given to elements so that they can be uniquely identified by either CSS rules or JavaScript commands.

In CSS the purposes of classes is to define a set of rules that can then be applied to multiple elements, not just a single element. In JavaScript, classes are of less use than IDs because extra code must be written to deal with them.

In certain circumstances some browsers allow IDs to be used in a similar manner to classes. However, this is nonstandard and the behavior could be easily removed at any time. Also, because classes are available, there is no need to treat IDs as classes. The answer to this question is, therefore, yes you can (sometimes) reuse IDs, but you shouldnt.

The float property can align elements to the left or right such that they line up with other elementsfor example: float:left.

The border property lets you add borders to elementsfor example: border:1px solid #888;.

You can change the background color of an element with the background propertyfor example: background:blue;.

You can specify the width of an element using its width propertyfor example: width:320px;.

To set an elements text style to italic, you can use its font-style propertyfor example: font-style:italic;.

To center text within an element, use its text-align propertyfor example: text-align:center;.

You can apply a shadow to an element through its box-shadow propertyfor example: box-shadow:4px 4px 4px #888;.