Box Properties Lesson Explained

This week we learn about CSS box properties.

read textbook - chapter 7 (160-165), chapter 6 (134-139)
template review
margin and padding at your website
adding a background image to your website
the box model - a sample page
borders with CSS - a sample page
background basics

Template Review

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset = UTF-8">
<title>Place a title here</title>
</head>
<body>
<h1>Place a main header here.</h1>
<h2>Place a second level header here.</h2>
<p>Place a paragraph of text here.</p>
<h3>Place a third level header here.</h3>
<p>Place a paragraph of text here</p>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
</p>
</body>
</html>

Margin and Padding - a demonstration of adding padding, margin, border and background color to my website.

I have returned to my home page and added some new content. I now have an area of the page tilted "flower of the month", some introductory text and then a description of the plant.

I would like the paragraph of text which discuss the flower of the month, to display differently than the other paragraphs

When I want one paragraph to behave differently than the others I create a "class" for the p tag which will allow me to define a unique style for this particular paragraph. Here is the code I added to the "garden.css" file to control background color, padding, border and margin.

p.month
{border-color:#000000;
border-width:1px;
border-style:solid;
background-color:#e5de92;
padding:25px;
margin:30px;}

Garden home page with padding, border, and margin

Placing an Image in the background

Here is the demo to place an image in the background of a page element.

p.month
{border-color:#000000;
border-width:1px;
border-style:solid;
background-color:#e5de92;
padding:25px;
padding-left:80px;
margin:30px;
margin-right:150px;
background-image:url(images/iris.gif);
background-repeat:no-repeat;
}

Garden home page with background image added

Box Model - a demonstration of a smaple page tht shows the effect of padding, border and margin on sample paragraphs.

The box model is made up of 4 elements:
content, padding, border, and margin.

In order to understand these elements I have created a demonstration that uses color to show where these elements are located and how they relate to each other.

Create a web page named "box-sampler.html" and add this code to the opening body tag.

<body style="background:#9999CC">

This is an inline style which changes the background color of my page to blue gray. Note that by using the single word background as the property I am using the shorthand method of declaring a background-color.

Next type a paragraph of text. Within the <p> tag that surrounded this text add another inline style for a background color.

<p style="background:#666699;">

This colorized the background of text within the paragraph. The area which is just the words I typed is referred to as the "content". I notice the content has no extra room along the sides, the dark blue color is just behind the words, and ends exactly where the words end.

Now I add another paragraph which has content and padding. I modify the inline style as follows.

Again I am using a shorthand method for the padding, I am also using a shorthand for padding, a single value of 20 pixels will apply padding to all 4 sides of the content.

Please note that padding takes on the background color of the content.

Now, using the border shorthand, add a border of 2 pixels, solid, light gray color.

Finally add the margin property:

This causes the content area to shrink away from the side so that 50 pixels of margin can display along all 4 edges. The margin property is listed in it's shorthand form, and since only one value is listed it is applied to all margin settings. The margin will display in the page color.

Box Model sample page.

Border Sampler

In this demonstration I would like to go through all the possibilities for the border style values and show you the border shortcut code.

In the movie I applied the border style to the text included in a "flower of the month" paragraph, however on this web page I have included the code in a much smaller paragraph so you could see the CSS code and the effect it creates.

This text is surrounded by a solid border, check out how it looks. The width is 1 pixel and the color is black CSS code = border:3px solid #000000;

If I replace the solid value with dotted this is the result. This text is surrounded by a dotted border. CSS - border:3px dotted #000000;

I replace dotted with dashed This text is surrounded by a dashed border- CSS - border:3px dashed #000000;

Next I try double This text is surrounded by a double border, check out how it looks. CSS border:3px double #000000;

Now I enter outset This text is surrounded by a outset border, check out how it looks. CSS - border:3px outset #000000;

Now I try inset This text is surrounded by a inset border, check out how it looks. The width is 3 pixels and the color is black.
border:3px inset #000000;

Another option is groove - that sounds fun! This text is surrounded by a groove border, check out how it looks. CSS border:3px groove #000000;

The final value is ridge This text is surrounded by a ridge border, check out how it looks. CSS - border:3px ridge #000000;

This text is surrounded by a variety of border styles, check out how it looks. CSS - border-top:3px solid black; border-left: 4px dotted #FF0000; border-bottom:6px dashed #00ff00; border-right:2px double #0000ff;

You can also declare the width of a border with word value instead of a pixel size, the words are thin, medium, thick.

Garden home page with border of inset

Sample page of border styles

Background Basics

I'd like to show you several options for displaying a background image on your web page. Here is the code I would use to display a picture of my dog which is stored within the "images" folder.

div#back {background-image:url(images/dog.jpg);
color:#ccc; }

Now, let's take a look at the HTML markup. I have a div tag with an id of "back" and then several paragraphs of text. At the end of the paragraphs I enter an ending div tag.

Please note that there is no image code in this markup, yet when I view the page I will see many images. These images are all background images and are displayed because of CSS code, not the <img> tag.

View page with entire area filled with background image.

As you can see, the area behind the content is filled with pictures of my dog Maverick. The background-image property causes the image to tile or repeat so that it fills the entire div tag area. As I change the size of the window the number of dogs changes to fill the new shape.

This is a blessing and a curse since I find it hard to read the text over the dog.

One solution is to have the image of the dog only display one time. Back at the CSS code I have added a new property"background-repeat" and a value of "no-repeat". This will cause the image to display only one time.

revised CSS code
div#back {border:1px solid c60; padding:20px; background-image:url(images/dog.jpg); background-repeat:no-repeat; color:#ccc; }

As I view the file in the browser I see that the image is displaying in the top left corner of the div tag, but is not repeating. I like this look, but find it hard to read the gray text. I would also like to move the text to the right so it is not displaying over the image.

revised CSS code
div#back {border:1px solid c60; padding:20px; background-image:url(images/dog.jpg); background-repeat:no-repeat; color:#ccc; background-color:#000; padding-left:200px; }

I save and view in the browser. I like the fact that the dog is on the left and the text is on the right.

View file with background image displaying only once

Now let's experiment with additional settings I can apply to the background-repeat property. Back at the code I change the value of the background-repeat property to repeat-x, this will cause the image to repeat along the x axis which means it will repeat horizontally. If the dog will be displaying along the top, I need the padding to also display along the top. I change the padding declaration as shown below.

revised CSS code
div#back {border:1px solid c60; padding:20px; background-image:url(images/dog.jpg); background-repeat:repeat-x; color:#ccc; background-color:#000; padding-top:200px; }

As I reload the page, I see the dog image repeating along the top and the text displaying below.

View file with background image displaying across the top of the screen.

My next experiment is to set the repeat along the y axis which will cause the dog to display in a vertical column. I change the value of the background-repeat to repeat-y and change the padding back to the left side.

revised CSS code
div#back {border:1px solid c60; padding:20px; background-image:url(images/dog.jpg); background-repeat:repeat-y; color:#ccc; background-color:#000; padding-left:200px; }

As I view the file in the browser I see the dog repeating along the left and the text displaying to the right.

View file with background image displaying along the left side of the screen.

One final trick, in the final example the dog displayed along the y axis starting at the upper left corner. What if I wanted the dog to repeat along the right edge of the screen? To achieve this effect, I would simply add the values of top and right to the background property. I would also need to adjust the padding so it displayed along the right.

revised CSS code
div#back {border:1px solid c60; padding:20px; background:url(images/dog.jpg) repeat-y top right #000; color:#ccc; padding-right:200px; }

View file with image repeating vertically along the right.

Turn in Homework

On the homework organizer page, add a link to the Web pages which contain the tags that are using box the properties covered in this lesson. Add another link to the .css file. Explain what element is displaying the box properties and the background property. sample homework organizer page

Point break down

Padding, border, margin and background image code on your class website project that you worked on in CS 50.11A. [20pts]

Box property sampler [10pts]

Border sampler [10pts]

Take Quiz

Here is a link to quiz 1 which is worth 20 points

Quizzes are open books and open notes but you must not talk to anyone or use your computer for anything except to take the quiz itself. There is no time limit. You will only get one attempt. If you load the quiz more than once you will receive a 0.