Hello from Grangeville, Idaho!Hello from Grangeville, Idaho!| Home | Week 1 - Project | Week 2 - Project | Week 3 - Project | Week 4 - Project |
|
Week 5 - Project - Quiz | Week 6 - Before Project - After Project |
As the weeks progress pages will be added or edited as our project assignments move forward. You will find links to these pages above. Enjoy, and I hope you will see improvements as we move onward! Sandee
Chimene and Minz,
Thank you so much for a great class. I really learned alot!!! Just hoping it will all stick in my brain so I can apply it to my work! Appreciate all of your help and the time you spend with us! Thank you, thank you, thank you!!!
Do have a question for you - not related to this class. I have a client that wants to put their Sunday sermons on their website. My question is: do I make the sermon into an MP3 then supply a link to that or do I need to do something more complicated? If you would happen to know or can give me a lead to a direction where I can find the info, please get back to me.
Thanks again,
Sandee
Week 6
Link to Week 6 Before Project
Link to Week 6 After Project
Week 5
Link to Week 5 Project
Link to Week 5 Quiz
Week 4
Link to Week 4 Project
Week 3
Link to Week 3 Project
Week 2
Link to Week 2 Project
Week 2 Quiz Answers and some comments:
1. Describe (in words) what the following selectors will match. For example, the selector div + p matches "Any p element that immediately follows a div element."
(1) body * p li em a
Any "a" element that is descendent of an "em" element that is a descendent of a "li" element that is a descendent of a "p" element that is a descendent of "any" element descendant of the "body"
(2) div[class] + div * * > [href]
Any "href" element that is "child" to "any" element that is a descendent of "any" element that is a descendent of a "div" element that is a descendent of a "div" element with a "class" attribute
(3) * * > * + * + * p * > * *
"Any" element that is a descendent of "any" element that is a "child" of "any" element that is a descendent to a "p" element that is a descendent to "any" element that follows "any" element that follows "any" element that is a "child" to "any" element that is a descendent to "any" element
(4) div > p:first-child a
Any "a" element that is a descendent to a "first-child" of a "p" element that is a "child" to a "div" element
(5) p#green > span + code[id] em
Any "em" element that is a descendant to an "id" element of "code" following a "span" element that is a "child" to a "green" "id" attribute to a "p" element
2. Using the specificity notation from section 6.4.3 of the CSS2.1 specification (0,0,0,0 or 0-0-0-0) provide the specificity of the following selectors.
CHIMENE: THIS IS PROBABLY THE MOST CONFUSING THING FOR ME TO UNDERSTAND.....AM MAKING A TRY AT IT, BUT, I'M SURE IT WILL BE ALL GOOFED UP! I JUST DON'T GET IT! GRRRRRRRRRR..........
(1) * > * + * * * * * > * a
0-0-0-1
(2) body h1 + div div p:first-child + div p span em a
0-0-1-7
(3) h1#first + h2#second + div#main
0-3-0-3
(4) div:first-child > * > li:first-child
0-2-0-3
(5) body > h1.opener
0-1-0-1
3. Given the document pointed to in this link, state which style declarations (properties and values) will apply to the following portions of markup identified in the document.
(1) Portion 1 (Paragraph - "Three important things to remember:")
body {font-style:normal;
font-variant: small-caps;
font-size: 12px;
line-height: 16px;
div#main {font-family: arial, sans-serif;
p {font-weight: bold;
background: yellow;}
div#main, p {color:red;}
(2) Portion 2 (List item - "Don't worry, be happy!")
li {color: black;
background: white;
font-style: normal;}
body {font-variant: small-caps;
font-size: 12px;
line-height: 16px;
font-family: times, serif;}
4. Write a single selector to accomplish each of the instructions stated below. The instructions apply to the document pointed to in this link.
(1) Boldface the "normal.html" link and the only absolute hyperlink in the document.
a:first-child {font-weight: bold;}
(2) Draw a blue border around the list item "Never let 'em see you sweat."
ol li:first-child + li {border: blue solid 2px;
background: white;}
(3) Color the <a href="http://www.sdm.com"> link green when it has been visited. This style should not apply to any other links in the document.
p.footer a:first-child:visited {color: green;
background: white;}
5. Draw a document tree for the document presented in question #4.
BODY | DIV ID=MAIN | | | | | P.NORMAL P OL P | LI __ LI __ LI
Week 1
Link to Week 1 Project
Sandee Wolfinger
Email: sandee@ad-designplus.com
Website: www.ad-designplus.com