Web Development with HTML and CSS

CSS Placement

Assessment
Activity
Enlightenment
What method should you use to apply styles specific to one page?
inline styles
internal stylesheet
external stylesheet
any of the above
What method should you use to apply styles to multiple pages?
inline styles
internal stylesheet
external stylesheet
any of the above
Which method only applies styles to a single element and should usually be avoided?
inline styles
internal stylesheet
external stylesheet
none of the above
Add inline styles using the
style attribute
style element
link attribute
link element
Add an internal stylesheet using the
style attribute
style element
link attribute
link element
Add an external stylesheet using the
style attribute
style element
link attribute
link element
What styles override all other styles.
default styles
inline styles
styles set in an internal stylesheet
styles set in an external stylesheet
A webpage can link to more than one external stylesheet.
true
false
If a property for an element is set in an internal stylesheet and an external stylesheet, which style will be used?
the style in the internal stylesheet
the style in the external stylesheet
the style in the stylesheet that is defined first
the style in the stylesheet that is defined last
The final stylesheet created by the browser to integrate the default styles with all the styles specified, following the cascading rules of priority, is called the:
virtual stylesheet
final stylesheet
master stylesheet
hidden stylesheet
In the basic HTML structure, which of the following is true?
the body element is a child of the html element
the body element is a parent of the html element
the body element is a sibling of the html element
the body element is not related to the html element
A style specified for an element is also applied to all elements defined within that element. This concept is known as:
transfer
inheritance
generalization
cascading

Get to know the DOM

Learn about the Document Object Model (DOM) while finding answers to the questions below.

Start your research by using the resources in the "Enlightenment" tab. After you feel you have a base understanding of the DOM, answer the questions below.

1. In your own words, what is a DOM?

2. How many children can an HTML element have?

3. How many parents can an HTML element have?

4. Why are some CSS properties set for an HTML element inherited by its child elements while others are not?

5. How do you force a child element to inherit a particular CSS property from it's parent?

View the DOM of this page. In Chrome, you may click on the page and select "Inspect" to find the DOM under the "Elements" tab. Other browsers have similar methods for inspecting the DOM.

6. How many child elements does the head element have?

7. What is the third child element of the body element?

Use the DOM depicted below to help answer the last few questions.

8. How many nodes are there?

9. How many HTML elements are there?

10. How many close tags would be needed to create the page depicted by the DOM?

- Wiki Entry - w3.org
Inheritance and cascade

- reference - w3schools
The HTML DOM Document Object

- instructional video - Educator.com
Exploring the DOM

- instructional video - DevTips
HTML5 Basics - The DOM