. This requires you to modify the HTML page to add in these new
elements. In your CSS, create the corresponding selectors to set the borders to have a color and border
(make it at least 2 pixels thick). The intention of this exercise is to to help you see the layout of your
sections created using div, span, and classes. 1) Place a green border
around all of the
content.
7) Bottom (footer) should
have a yellow border.
6) All paragraphs should
have a thin black border.
This is so you can see the
page flow. Note, all images
should be nested within
elements.
4) Each journal entry
should have a blue border.
5) The dates within these
entries should have a
purple border (consider
span element).
2) Top of the page should
have a red border.
3) The “Good things to eat”
(and h2 element) should
have its own border that is
orange.Exercise 2: Create files: eatfood_ex2.html and eatfood_ex2.css. NOTE: The only change to
eatfood_ex2.html is that it links to eatfood_ex2.css instead of eatfood_ex1.css.
i) Modify the CSS based on the annotations on the right.
ii) Pay attention to the difference between margin and padding.
iii) Use the rgb(-,-,-); notation for the color property in your CCS.
1) Change the body of
the HTML page to have
a background of
“background.gif”
(provided).
Add a left and right
margin of 10% to al of
the main content.
2) Change the div
around all the elements
(the one with a green
border) to have a white
background.
3) Change all the
entries (all items with a
blue border) to have
the following
background color:
R=196, G=226, B=255
You should also add
padding of 5px and a
top-margin of 10px.
(Note the difference
between padding and
margin)
4) Remove the black
border for the
elements.Exercise 3: (create files: eatfood_ex3.html and eatfood_ex3.css. )
This exercise will change the alignment of elements using float, overflow, and alignment attributes in the
CSS. This should be possible without editing the main HTML page (other than the link to the new CSS).
See the annotations for the changes to make. Your webpage should look as close as possible to below.
The heading text in
the red box should
appear on the right
side of that section of
the page.
The journal entries’
images should float
on the right side next
to the surrounding
text. The image should
stay within the
bounds of the blue
box; that is, it should
not bleed into the
other content below
it. You will need to
use the “overflow”
attribute to make the
float element fit
correctly. Exercise 4: (create files eatfood_ex4.html and eatfood_ex4.ccs)
This exercise will finish the webpage. This last iteration makes small cosmetic adjustments to the border
and colors. Again, you will not need to modify the HTML file other than linking in the new CSS.
Change border to
white. Make the
background
R=168, G=213, B=255
Change entries
border to
R=168, G=213, B=255
Remove border of
footer and align the
text to the centre.