Homework Assignments
1. Create your own rules for the BODY, H1, H2 and P selectors and save them in your mystyle.css style sheet. Link this style sheet to your HTML files (template1.html and template2.html).
2. Create a background image or take one of these and add it to an HTML document using your external style sheet mystyle.css. Use background-repeat and background-image to position your image on the page.
Template 1-1 Paper
Template 2-1 Stuff
Week 2: Go to your HTML documents that you created for class last week : template1.html and template2.html.
1. Use an embedded style sheet to override an external rule, and to add some borders, margins, and padding to a Web page. Add an image and put a border around it.
2. Use an embedded style sheet to add a list to your document. Add an image bullet. Nest a second list and use contextual selectors to add a style of your choice. Show both list-style-positions.
Template 1-2 Paper
Template 2-2 Stuff
Week 3: For this week's homework, complete the following tasks:
1. Use your text editor to create a class rule in mystyle.css. Apply the class in template 2.html. Template 2-3-1 Stuff
2. Create a class rule in the embedded style of your HTML document. Use SPAN and DIV inline to apply the new class. 3. Create an inline style rule that overrides an existing rule. Template 2-3-2 Stuff
4. Demonstrate your undersanding of FLOAT and CLEAR by using them on your HTML document. Template 2-3-3 Stuff
5. Use the MARGIN family of properties to make one element overlap another. Template 2-3-4 Stuff
6. Make a border whose size remains static and another that changes when the browser window is resized. Template 2-3-5 Stuff
Week 4:
1. Demonstrate your understanding of pseudo-selectors by using :first-line, :first-letter and the three anchor <A> states in your HTML document. Add the :hover state to some of your hyperlinks.
2. Demonstrate your understanding of the lesson by using line-height, letter-spacing, word-spacing and vertical-align in your HTML document. Try working with margins and padding to make text-indent product a hanging indent.
3. Force a page break.
4. Use !important to override all other rules.
Template 1-4 Paper
Template 2-4 Stuff
Week 5:
1. Use relative and absolute positioning to place two elements on your HTML page.
2. Use z-index to stack some images of your own.
3. Add an overflow element to one of your HTML pages.
Template 1-5 Paper