ACTIVITY:

CSS– SIMPLE BOX MODEL EXERCISES

Create a new folder in your working area named CSS Box Model Exercises, and within this create an images folder. You will need to copy the image files – back.gif, binding.gif and digital.gif – to this images folder. Now, define a new Dreamweaver site called CSS Box Model Exercises which maps to theCSS Box Model Exercises folder.

Create a new HTML page and in Design view enter the following:

<html>

<head>

<title>Using CSS for Box Model Formatting</title>

</head>

<body>

<h1>Alice's Adventures in Wonderland</h1>

<h2>Down the Rabbit Hole</h2>

<p>Alice was beginning to get very tired. Once or twice she had peeped into the book her sister was reading, but it had no pictures.</p>

<p>"<em>and what is the use of a book</em>," thought <strong>Alice</strong>, "<em>without pictures?</em>"</p>

</body>

</html>

Save the page as boxstyle.html and preview in a browser.

Create an internal/embedded style sheet which defines the following styles:

Selector / Attribute / Value
h1 / font-family / Georgia, "Times New Roman", Times, serif
font-size / 28px
color / #0000FF
text-align / left
font-style / italic
h2 / font-family / Georgia, "Times New Roman", Times, serif
text-align / left
padding-top / 10px
border-top-style / ridge
border-bottom-style / ridge
p / text-align / justify
margin-left / 200px

Save the page as boxstyle1.html and preview in a browser.

Remove the style rule for the h1 selector and replace with the following rule:

The border should be blue, solid, 2px in width.

Selector / Attribute / Value
h1 / border-color / #0000FF
border-style / solid
border-width / 2px

How can you write these three declarations in shorthand?

Remove the style rule for the h2 selector and replace with the following rule:

The border should be red, dashed, 1px in width.

Selector / Attribute / Value
h2 / border-color / #FF0000
border-style / dashed
border-width / 1px

Add a 1pxwide, solid, red border to the left and right hand sides of the whole page.

Selector / Attribute / Value
body / border-right-width / 1px
border-left-width / 1px
border-right-style / solid
border-left-style / solid
border-right-color / #FF0000
border-left-color / #FF0000

Save the page as boxstyle2.html and preview in a browser.

Use the margin-left and margin-right properties to set both margins of the <h1> element to 100px.

Selector / Attribute / Value
h1 / margin-left / 100px
margin-right / 100px

Use the padding-left and padding-right properties to set left and right padding for the <h1> element to 3em.

Selector / Attribute / Value
h1 / padding-left / 3em
padding-right / 3em

Save the page as boxstyle3.html and preview in a browser.

Use stylesheet properties set the background page colour to yellow, and set the background of the <h1> element to teal.

Selector / Attribute / Value
body / background-color / #FFFF00
h1 / background-color / #339999

Save the page as boxstyle4.html and preview in a browser.

Now, remove the background colour styles from both the <body> and <h1> elements and set the background-image property of the <h1> element to display the image back.gif.

Selector / Attribute / Value
h1 / background-image / url(images/back.gif)

Save the page as boxstyle5.html and preview in a browser.

Save the page straightaway as boxstyle6.html.

Make the following changes to the styles and review the changes in the browser at every stage. Set the background-image property of the <body> element to binding.gif. Set the background-repeat property of the <body> element to repeat-y. Set the margin of the <h2> and <p> elements to match that of the <h1> element.

Selector / Attribute / Value
body / background-image / url(images/binding.gif)
background-repeat / repeat-y
h2 / margin-left / 100px
margin-right / 100px
p / margin-left / 100px
margin-right / 100px

Save the page as boxstyle6.html and preview in a browser.

Now, reduce the size of the window so that scrolling is required. Note that the background image scrolls with the page content.

Now edit your page by adding the line:

background-attachment: fixed;

to the end of the properties defined for the body tag.

Selector / Attribute / Value
body / background-attachment / fixed

Save the page as boxstyle7.html and preview in a browser.

Note that the background image no longer scrolls with the page content.

Return to your Code view and remove this last line of code.

Now, change the background image used by the <body> element to digital.gif. Make sure that only a single instance of the image is displayed. Set the position of the image to the bottomright of the web page. Set the backgroundcolour for the <body> tag to yellow.

Selector / Attribute / Value
body / background-image / url(images/digital.gif)
background-repeat / no-repeat
background-position / right bottom
background-color / #FFFF00

Save the page as boxstyle8.html and preview in a browser.

Activity - CSS-Simple Box Model Exercises.docVersion 1

Page 1 of 9