DM 171: Week Two - February 15
**Due to the Presidents’ Day Holiday, we will be covering Week Two’s material during Week One.**
Click on a tab to reveal its content…
- Overview
- Homework
Week two is a quick review of CSS selectors, the CSS cascade, and determining specificity of styles. Your style strategy can make your life easier or harder…
We will be playing with a test file and you will be given text and an image to style a page for homework.
Topics
This page, Selectors, goes over the ways in which CSS selectors may be defined.
This page, CSS Cascade and Specificity, covers how the cascade works and how to calculate a style’s specificity. Not quite as dry as it sounds…
Right-click or Control-click on this link to download a test file to experiment with some styles.
Homework
You will construct an index.html page for your public_html folder on the webhawks.org server. You can find out your login and password procedure under the webhawks.org tab of the Network Access page. This “home” page will have a link to all your other homework assignments.
Your main homework this week is to format “The Raven” by Edgar Allen Poe.
- Download this text file of The Raven - theraven_poem_only.txt
- Use this graphic in your composition - theraven.gif
- Create a page that has a heading section, poem section, and footer section
- In the heading section, place the title and author of the poem
- In the poem section, format the poem
- In the footer section, format the attibuting text at the bottom of the text file and add a link back to your homework home (index.html) page.
- Use an external style sheet for your style definitions
- Upload all files and test your creation by next class.
Helpful Links
- Code Style: Combined font survey results
http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml - Loren Ipsum
http://lipsum.org/ - Chris Pederick's Web Developers Toolbar
http://chrispederick.com/work/webdeveloper/ - Firebug by Joe Hewitt - Another development tool for Firefox
https://addons.mozilla.org/firefox/1843/ - MeasureIt by Kevin Freitas - Browser window measuring tool.
https://addons.mozilla.org/firefox/539/ - Meyerweb Color Blender
http://meyerweb.com/eric/tools/color-blend/ - Color Schemer Online
http://www.colorschemer.com/online.html - Typetester
http://www.typetester.org/
Strategic Hint
Use this style to eliminate the browser's built in styles influence on your creation.
* {margin:0; padding:0;}
This trick may have too severe an effect, try looking for "CSS reset" with your favorite search engine for variations on this theme.
Final Words
Have fun!