Note: Most of the links have been removed from this page.
Web designers who do not know CSS typically use tables to force text or images to position in specified areas of the page and to create borders around specified text. This is a lot of work, a lot of complexity, and a lot of tagging, which can slow the loading of the page. Instead, CSS provides some tags that simplify this process and that provide many new features unavailable in HTML. (Don't get frustrated if you can't find the answer to some these exercises. Contact your instructor for help.)
Boxes are nothing other element with border! Place these tags within the body tags of a web page:
<p style="border: 3px solid red; padding: 0.15in">
Try putting some text within these tags. Lots of text.
Experiment with the following:
The CSS box model, which has everything to do with creating an positioning things like boxes on a web page, is quite complex and requires some study. However, to a taste of it, try the following:
Put these two paragraphs in an HTML file:
The Coccinellidae are a family of beetles, known variously as ladybirds (UK, Ireland, Australia, Sri Lanka, Pakistan, South Africa, New Zealand, India, Malta, some parts of Canada and the US), or ladybugs (North America). When they need to use a common name, entomologists widely prefer the names ladybird beetles or lady beetles as these insects are not true bugs. Lesser-used names include God's cow, ladyclock, lady cow, and lady fly.
Coccinellids are small insects, ranging from 1 mm to 10 mm (0.04 to 0.4 inches), and are commonly yellow, orange, or scarlet with small black spots on their wing covers, with black legs, head and antennae. Such color patterns vary greatly however; for example, a minority of species, such as Vibidia duodecimguttata, a twelve-spotted species, have whitish spots on a brown background.
Download these two images of ladybugs:
Put this CSS in the styles area of your HTML:
Tag the ladybug this way:
<img src="ladybug.gif" class="floatLeft">
For the other, you'd use floatRight. These tags go above the paragraphs (and outide the p tags) in which they are going to float. If you want to reduce the size of these images, it helps to use something like Photoshop or GIMP (which is free). If you need a recording of how to size an image in Photoshop, let me know. I have not done this task in GIMP.
w3schools has an interesting page in which you can experiment with height and width values: CSS Dimension. Try Set the width of an element using a pixel value and Set the maximum width of an element using percent.
Take a look at this fancy runaround, which runs around a duck's bill.
Note: You can stop here if you wish. Once you have done the preceding, you've fulfilled the requirements for this unit.
To do this exercise:
Return to your bookmarked course main page.
Programs and information provided by email@example.com.