Lab #1: Recreating Styles
Please look at the following examples. Here are some common ways people might style elements in a website with HTML elements.
Your job is to take a look at the different examples. Take note of the HTML elements and think of ways to make the same kind of style but using only CSS. In the sample will be the original HTML and then a modified version that will give hints to you about where to put style information. The samples have a framework for you to work off of. You can pick and choose which samples you'd like to try.
Look in the stock directory for images you will want to use.
Updated 3/13: I re-ordered the samples by difficulty and added the "original source".
Sample 1
Right-click the following files and "Save As" HTML. Open the file up in WordPad and make sure when you save the file to save it as PLAIN TEXT.
Original Source - Modified Source
Change the link color of "Aliquam".
Ut sed ipsum. Aliquam ut tellus. Aliquam augue nisl, elementum posuere, sollicitudin eget, sollicitudin eu, pede. Phasellus nec odio quis mauris mollis fermentum. Vivamus nisl. Sed id augue eget orci convallis molestie. Vivamus id magna. Mauris diam massa, porttitor id, placerat in, nonummy eu, dolor. Suspendisse aliquam metus et urna. Nunc sit amet augue a nulla dapibus volutpat. Vivamus at nunc eu magna pretium rutrum. In hac habitasse platea dictumst. Etiam sollicitudin tincidunt pede. Nam pharetra. Nulla dolor purus, vestibulum sit amet, posuere vel, bibendum sed, diam. Sed sagittis, diam nec commodo lacinia, tellus diam blandit dui, eget lobortis sem mi a felis. Nullam quis mauris.
Sample 2
Right-click the following files and "Save As" HTML. Open the file up in WordPad and make sure when you save the file to save it as PLAIN TEXT.
Original Source - Modified Source
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec lectus sem, nonummy vitae, sodales vel, elementum nec, neque. Integer ullamcorper fermentum nisl. Pellentesque nisi augue, lobortis ut, dictum ut, suscipit sit amet, pede. Phasellus arcu felis, vulputate vel, consequat a, accumsan nec, arcu. Mauris elit lorem, porta a, feugiat at, tincidunt vel, ipsum. Etiam rhoncus dui ut turpis. Sed at mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Praesent eu erat. Aliquam semper, risus in cursus faucibus, ligula dolor tempor nisi, sed tristique odio erat quis lorem. Maecenas pulvinar nisl hendrerit ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc dapibus, lorem quis commodo commodo, turpis lectus porta dui, id dictum felis lorem vel velit. Cras sagittis augue eget nunc. Ut dapibus augue vitae elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer enim augue, vestibulum at, blandit id, ornare nec, lectus. Vestibulum sagittis tellus.
Sample 3
Right-click the following files and "Save As" HTML. Open the file up in WordPad and make sure when you save the file to save it as PLAIN TEXT.
Original Source - Modified Source
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec lectus sem, nonummy vitae, sodales vel, elementum nec, neque. Integer ullamcorper fermentum nisl. Pellentesque nisi augue, lobortis ut, dictum ut, suscipit sit amet, pede. Phasellus arcu felis, vulputate vel, consequat a, accumsan nec, arcu. Mauris elit lorem, porta a, feugiat at, tincidunt vel, ipsum. Etiam rhoncus dui ut turpis. Sed at mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Praesent eu erat. Aliquam semper, risus in cursus faucibus, ligula dolor tempor nisi, sed tristique odio erat quis lorem. Maecenas pulvinar nisl hendrerit ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc dapibus, lorem quis commodo commodo, turpis lectus porta dui, id dictum felis lorem vel velit.
Cras sagittis augue eget nunc. Ut dapibus augue vitae elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer enim augue, vestibulum at, blandit id, ornare nec, lectus. Vestibulum sagittis tellus. Curabitur a odio. Proin at ligula. Sed vel eros vitae nisl luctus elementum. Ut ac sem eget risus tempus vestibulum. Suspendisse congue dolor in libero. Curabitur ligula. Nam et pede non turpis dignissim ornare. Aenean imperdiet varius velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla mattis quam in lacus. Maecenas sed velit. Curabitur vitae nisl.
Sample 4
Right-click the following files and "Save As" HTML. Open the file up in WordPad and make sure when you save the file to save it as PLAIN TEXT.
Original Source - Modified Source
Try and change each border to a different color and style:
- Make the top one blue and dotted
- Make the right one a solid color black with 10px width
- The bottom one needs to be invisible
- The left border needs to be dashed and in hot pink
| Ut sed ipsum. Aliquam ut tellus. Aliquam augue nisl, elementum posuere, sollicitudin eget, sollicitudin eu, pede. Phasellus nec odio quis mauris mollis fermentum. Vivamus nisl. Sed id augue eget orci convallis molestie. Vivamus id magna. Mauris diam massa, porttitor id, placerat in, nonummy eu, dolor. |
Sample 5
Right-click the following files and "Save As" HTML. Open the file up in WordPad and make sure when you save the file to save it as PLAIN TEXT.
Original Source - Modified Source
| Sample 5 |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec lectus sem, nonummy vitae, sodales vel, elementum nec, neque. Integer ullamcorper fermentum nisl. Pellentesque nisi augue, lobortis ut, dictum ut, suscipit sit amet, pede. Phasellus arcu felis, vulputate vel, consequat a, accumsan nec, arcu. Mauris elit lorem, porta a, feugiat at, tincidunt vel, ipsum. Etiam rhoncus dui ut turpis. Sed at mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Praesent eu erat. Aliquam semper, risus in cursus faucibus, ligula dolor tempor nisi, sed tristique odio erat quis lorem. Maecenas pulvinar nisl hendrerit ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc dapibus, lorem quis commodo commodo, turpis lectus porta dui, id dictum felis lorem vel velit. Cras sagittis augue eget nunc. Ut dapibus augue vitae elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer enim augue, vestibulum at, blandit id, ornare nec, lectus. Vestibulum sagittis tellus. |
Sample 6
Right-click the following files and "Save As" HTML. Open the file up in WordPad and make sure when you save the file to save it as PLAIN TEXT.
Original Source - Modified Source
| Sample 6 | Second Column |
|---|---|
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec lectus sem, nonummy vitae, sodales vel, elementum nec, neque. | Integer ullamcorper fermentum nisl. Pellentesque nisi augue, lobortis ut, dictum ut, suscipit sit amet, pede. Phasellus arcu felis, vulputate vel, consequat a, accumsan nec, arcu. Mauris elit lorem, porta a, feugiat at, tincidunt vel, ipsum. Etiam rhoncus dui ut turpis. Sed at mi. |
Sample 7
Right-click the following files and "Save As" HTML. Open the file up in WordPad and make sure when you save the file to save it as PLAIN TEXT.
I want a page with a white background and have a top margin of 10 pixels. My heading needs to be dark red, bold, and in Arial. All other text needs to be in Verdana. The first letter of each paragraph needs to be bolded and size point 16. All sub-headings need to be blue and italicized.
Sample 8
Right-click the following files and "Save As" HTML. Open the file up in WordPad and make sure when you save the file to save it as PLAIN TEXT.
I changed my mind on the last specification. Please make changes to Sample 7 so the second paragraph text is bright purple, it's my favorite color. Also put a background on the last paragraph, I like puppy footprints.
Sample 9
Right-click the following files and "Save As" HTML. Open the file up in WordPad and make sure when you save the file to save it as PLAIN TEXT.
Original Source - Modified Source
Look at the page linked above as "Original Source", try to change as much of the document you can to get rid of the static HTML elements and make a style instead. Yes, it is very ugly, but some pages on the internet look like this!
Sample 10
Right-click the following files and "Save As" HTML. Open the file up in WordPad and make sure when you save the file to save it as PLAIN TEXT.
Start to work on your own personal site. If you already have content, great! Otherwise, you can use the template I've made for Sample 10 and play around with it.