?
l) Which type of element (block/inline) is
?
m) Which type of element (block/inline) is ?
n) Which type of element (block/inline) is ?
o) Which type of element (block/inline) is ?
p) Which type of element (block/inline) is ?
q) Which type of element (block/inline) is ?
r) Which type of element (block/inline) is ?
s) Which type of element (block/inline) is
?
t) True/False: The parent of is
u) True/False: A child of is
v) True/False: A child of is
w) True/False: A child of is
x) True/False: A child of <head> is <meta>
y) True/False: The parent of <meta> is <html>
z) True/False: The parent of <title> is <meta>
a) What are the only children of <html> in the Document Tree?
<head> and <body>
b) True/False: every <p> has <body> as an ancestor.
true
c) True/False: every <p> has <html> as an ancestor.
true
d) True/False: every <p> has <head> as an ancestor.
false
e) True/False: every <meta> has <head> as an ancestor.
true
f) True/False: every <meta> has <body> as an ancestor.
false
g) True/False: every tag is a descendant of <html>.
true
h) True/False: every tag is a descendant of <body>.
false
i) True/False: every tag is a descendant of <head>.
false
j) What is the difference between a block element and an inline element?
block elements break onto new lines
k) Which type of element (block/inline) is <div>?
block
l) Which type of element (block/inline) is <span>?
inline
m) Which type of element (block/inline) is <p>?
block
n) Which type of element (block/inline) is <i>?
inline
o) Which type of element (block/inline) is <em>?
inline
p) Which type of element (block/inline) is <ul>?
block
q) Which type of element (block/inline) is <b>?
inline
r) Which type of element (block/inline) is <h1>?
block
s) Which type of element (block/inline) is <table>?
block
t) True/False: The parent of <body> is <html>
true
u) True/False: A child of <html> is <head>
true
v) True/False: A child of <html> is <meta>
false
w) True/False: A child of <html> is <title>
false
x) True/False: A child of <head> is <meta>
true
y) True/False: The parent of <meta> is <html>
false
z) True/False: The parent of <title> is <meta>
false
6. How would you avoid very narrow or very wide text lines in a page?
Using CSS similar to this:
body { min-width: 10em; max-width: 50em; }
7. Convert each of these from deprecated old HTML to its corresponding
inline CSS "style=" attribute.
See Method 1 in: http://www.html.net/tutorials/css/lesson2.php
1. <body bgcolor="#FF0000" ...>
2. <img border="1" ...>
3. <font face="verdana" color="green" ...>
1. <body style="background-color: #FF0000" ...>
2. <img style="border: 1px solid black" ...>
3. <span style="font-family: verdana; color: green" ...>
8. Convert each of these from deprecated old HTML to a CSS <style>
element inside <head>.
See Method 2 in: http://www.html.net/tutorials/css/lesson2.php
1. <body bgcolor="#FF0000" ...>
2. <img border="1" ...>
3. <font face="verdana" color="green" ...>
Inside <head>, you must use this type of <style> element:
<style type="text/css"> <!-- must use this type= attribute -->
body { background-color: #FF0000; }
img { border: 1px solid black; }
span { font-family: verdana; color: green; }
</style>
-----------------------------------------------------------------------
Many of the following questions apply to this incomplete HTML fragment.
Some questions below apply to any HTML page.
<ul id="foo">
<li><a href="/"><span>Home page</span></a></li>
<li><a href="..">Up one level</a></li>
</ul>
<h1>My first styled page</h1>
<p class="bar">Welcome to my styled page!</p>
<p><i>More about <a href="me.html">me</a>!</i></p>
<address>Ian Allen</address>
<p><a href="index.html">Index</a></p>
You can copy the above fragment into a test web page on the CLS and use
the Firefox Web Developer Toolbar to edit the CSS for the page to test
your answers, below.
9. Write a full CSS line that changes the color to red for all the text
only in the above "address" element.
address { color: red; }
10. Write a full CSS line that changes only the one index.html anchor
text above into font family "courier". Only change the one.
p > a { font-family: courier; }
(Why is "p a" an incorrect selector for the above sample HTML?)
11. Write a full CSS line that changes only the one "Welcome" paragraph
to have a width of half the page. Only change the one.
p.bar { width: 50% }
12. Write a full CSS line that changes all anchors (hyperlinks) into font
family "impact".
a { font-family: impact; }
13. Write a full CSS line that changes all the paragraphs and all types of
lists to have a 1 pixel solid blue border.
There are two types of lists: ordered, and unordered.
p,ul,ol { border: 1px solid blue }
14. Set this style for all span elements located anywhere inside lists:
- use font named "impact"
- colour the text red and the background green
li span { font-family: impact; color: red; background-color: green; }
(Why is "li > span" an incorrect selector for the above sample HTML?)
15. Set this style for the unordered list element using identifier "foo":
- use font named "courier"
- pad the top and bottom of the list with half of an em-space
- set a top and bottom margin of 12 pixels
- draw a thin solid blue border
ul#foo { font-family: courier; padding-top: 0.5em;
padding-bottom: 0.5em; margin-top: 12px; margin-bottom: 12px;
border: thin solid blue; }
16. Set this style for all paragraph elements in class "bar":
- position the element at the very top left of the page
- set the width to 20% of the page
p.bar { position: absolute; top: 0; left: 0; width: 20%; }
(You must select only paragraph elements with class "bar" here.)
--
| Ian! D. Allen - idallen@idallen.ca - Ottawa, Ontario, Canada
| Home Page: http://idallen.com/ Contact Improv: http://contactimprov.ca/
| College professor (Free/Libre GNU+Linux) at: http://teaching.idallen.com/
| Defend digital freedom: http://eff.org/ and have fun: http://fools.ca/