Creating a Page That Uses an External Style Sheet

Creating a page that uses an external style sheet

Creating the style sheet

You are going to create a page that has special formatting for h1 and h2 headings and for any links on the page. An example of what your work should look like is posted at the end of this document.

1. Save a plain-text document as style.css. (p. 190)

2. Set up the definitions for h1 and h2, and set Helvetica as the desired typeface for these heading styles. (e.g., p. 204, 232)

3. Set Arial as the alternate font for h1 and h2. (p. 233)

4. Set h1 and h2 to be in bold face. (p. 238)

5. Set h1 and h2 to appear in the same color of your choice — just not black. (p. 248). Choose a color by name (p. 182) or hex number (search for web hex colors online).

6. Set h1 only to be center-aligned on the page. (p. 259)

7. Choose a web-safe font that you think complements Helvetica for your paragraphs. Use p as the selector and choose a typeface from those listed under “Default fonts…” (p. 234). You can preview them in Word or search for web safe fonts online.

8. Set up a special style for your links so that they match your heading styles. This has several steps. See Figure B (p. 220) for the three states that you must define.

a. a:link defines an unvisited link. You want this to have the same font settings as your headings (Helvetica/Arial bold in your chosen color). Add the text-decoration:none line. This removes the underlining that appears by default under links.

b. a:visited defines a link you have clicked on. For this assignment, you want this to have the same link and font settings as above, except you’ll change the color to a new color that you may select.

c. a:hover defines what a link looks like when your mouse is placed on it but you haven’t clicked yet. For this assignment, you want this to have the same settings as a:link except you want underlining to appear, so change the text-decoration value to underline. Building your HTML page

9. Use doctype, html, head, meta, title, and body tags to set up a basic page as you always do.

10. In the head section, link to the external style sheet you created. (p. 192)

11. For the body of your page, go to http://www.lipsum.com (or http://www.baconipsum.com if you’re feeling hungry). Use the generator to create some copy for you and cut and paste about 400 words into the body of your page. Break the text into as many paragraphs as you desire.

12. Use the first few words you’ve copied as the title for the page. Add an H1 heading at the top of the page and three H2 subheads scattered through the text.

13. Turn two words under the first subhead into a relative link to your favorite.html page.

Your headings and link should reflect the styles you defined in the CSS document you created.

Save your page as lorem.html and save it along with your style.css file to your server. Email [email protected] the live link by the end of class time Thursday. Don’t forget to print off a hard copy of your code and rules, as well. If you send me a link and get me a hard copy of your code and style rules prior to Thursday’s class meeting time, you are exempt from class that day and can use the time to study for the HTML exam scheduled for next Tuesday. A review for the HTML exam is posted on my teaching page, as well. Lorem ipsum dolor sit amet Consectetur adipiscing elit. Morbi interdum mauris vitae nibh tempor sed molestie dui laoreet. Aenean lobortis elit a tellus sollicitudin sed vulputate est ultrices. Aenean accumsan metus in ligula iaculis lacinia. Fusce dignissim Leo sed eleifend adipiscing tempor retrum posuere erat, a egestas mi massa ut leo. In a nisi diam, aliquet faucibus sem. Integer magna urna, molestie nec mattis sit amet, dapibus sit amet purus. Maecenas libero just Porttitor nec porta ut, rutrum et purus. Ut vel urna id orci bibendum sodales ac vulputate erat. Ut quis bibendum velit. Etiam suscipit placerat justo gravida venenatis. Nam et mauris vitae dolor tempor venenatis. Vestibulum Ut tristique molestie risus Vitae rhoncus purus interdum sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Curabitur vel nunc libero, ac facilisis metus.