LESSON
05 – CSS REVIEW
WORK
TASK
1
Create a basic
html document (or download and unzip this one)
that includes the sections shown in the box below. Use only div tags for each section.
Title
Subtitle
This is a
nice long paragraph. It consists of
enough material to go have several lines of text. Yes, you might need to image this here but
on the student pages, it will be longer.
<Image>
Image Caption
Website of
Interest Link: Google
|
TASK 2
Inside a CSS
file, you will add the CSS rules to make format each section. Below is a list of how each section should be
formatted.
- Title
- Enlarged font
- Font type: Arial
- Font color: White
- Centered
- Bolded
- Background colour: Dark Gray
- Border colour: Dark Gray
- Subtitle
- Enlarged font (smaller than title)
- Font type: Arial
- Font color: White
- Centered
- Bolded
- Background colour: Dark Gray
- Border colour: Dark Gray
- Paragraph
- Font color: Black
- Left Border: Dark Gray
- Right Border: Dark Gray
- First letter should be enlarged
(like in newspapers)
- Image
- Needs to be centered
- Needs to continue the borders that
are on each side (left and right) of the paragraph above it.
- Image Captions
- Small font
- Font colour: Black
- Centered under image
- Needs to continue the borders that
are on each side (left and right) of the sections above.
- Website Link section
- Text label is black
- Link is blue
- Link becomes brighter blue when
mouse is over it.
- Needs to be continue the borders
that are on each side the sections above.
- Needs to also have a similar
border at the bottom.