In Penelope's page, you can hardly see that single black line border against the dark green background, but you can change that to a different color, or erase the border completely so you'll get that floating, less-defined look. You can also set the style of the border to dotted, dashed, double, groove, ridge, inset and outset.

border-style: double

You can set the border width to thin, medium, or thick, or you can set the specific pixel thickness.

border-style: groove; border-width: thick;
border-style: dashed; border-width: 2px;

You can also set each border (border-top, border-right, border-bottom, border-left) as a different style or thickness.

.spec3 {border-width: 1px 2px 3px 4px; border-style: solid double dashed dotted;}

That bit of coding will give you a one-pixel-wide solid top border, the right border will be a double line, 2 pixels wide; the bottom will be a dashed line 3 pixels wide, and the left margin will be a dotted line, 4 pixels wide.

You can add as many different classes as you want. Just remember to

• start them with a dot,
• enclose all the attributes between curly brackets,
• separate each property and value pair with a colon (:) and a space,
• end each pair with a semicolon (;).

These styles will go into the css document.

.blue {
margin: 2em;
padding: 2em;
border: solid thin #000033;
background: #ccccff;
}

And then you have to call up these classes in your html document:

<p class="blue">Riding your bike will make you healthy, wealthy and wise....</p>

The Floating Concept

You can add the coding on the right to your 13.css style sheet. This will give you a floating text box, to the left of your main body of text. The text in the main body will wrap around beneath the box if it is long enough.

We first open a style called floatbox, give it a width and height, float it on the left side, and give it an orange background. The /*orange*/ is a comment tag. You can put comments anywhere in your document to help you keep track of what you're doing.

The height of this box is set at 230 pixels, long enough for my image (179 px long), plus some space left over for text. For your own page, change this to fit the amount of words (or space needed by an image) you want to use. Otherwise, your words will spill out of the box and get printed over the main paragraph.

We're also giving the box a padding, a margin and that same dark blue border of 3 pixels (repeating colors).

Floatboxes let you put up images and text, so I've changed the color of the text to a darker purple: color: #54228C. This will show up better on my orange background color.

You can also float just an image, either to the right or left. You don't have to specify a size, like the floatbox class, but you don't get to add text either. That border color is another opportunity to pick up and repeat pieces of your color scheme

Both of these styles get added to your 13.css stylesheet.

In your 13.html document, you'll have to make these changes:

Right after opening up the .content division, open the floating textbox. The <p> tag will do this, using the attribute class="floatbox". I've put in some words and an image. A simple closing </p> tag will get me out of the floating box.

Right after that, I'll open up my floating image. Again, I simply add an attribute class="right", this time to the img tag, instead of a <p> tag.

Floatbox classes get added to the <p> tag; right class gets added to the <img> tag.

And then I continue on with the main content.

<div class="content">

<p class="floatbox">Riding into the sunset<br>
<img src="bike15a.jpg" alt="bike silhouette" width="200" height="179"></p>

<img class="right" src="bike15d.jpg" width="200" height="323"
alt="harried man on a bike">

<h1>Bikes are fun!</h1>

Here's what my home page will look like with these changes. I've changed the paragraph color to a lighter blue and put boxes around the different divisions to give you a clearer idea of how we designed it.

This is an illustration of how we would have divided the page using tables:

You can see that this could become much more tedious. It also illustrates the argument that using stylesheets allows you to code by design, what you want in each area, rather than by the layout constrictions of a table.

Assignment

1. In your 13.css document:
   1. Create a style that will set the margin, padding and border properties, much like a row or cell in a table. Change the background color of the box, and the border around the box to suit your own website.
      
      

      .spec2 {
      margin: 2em;
      padding: 2em;
      border: solid thin #000000;
      background: #270E55;
      }

      
      
   2. Add two floating elements, a floatbox (.floatbox) that you can use for images or text, and a floating image style (.right). Set one on the left and one on the right. Change the color codes to match your own color schemes.
      
      

      .floatbox { width: 220px; height: 230px; float: left; background-color: #FFB700; /*orange*/ color: #54228C; padding: 1em; margin-right: 2em; border: solid #54228C 3px; }

      .right {float: right; border: solid #54228C 3px; }

      
      
   3. Save your stylesheet as 13.css.
2. In one or both of your two html documents:
   1. Add a paragraph that uses the new class that sets the padding, margin, border, and background color.
   2. Add a floating image with a text heading or caption, using the .floatbox class with a <p> tag.
   3. Add a simple image with no text using the .right class with an <img> tag.
   4. Save all your files.

Remember to copy and paste as much as you can. This is not a typing class. You can see the coding for Penelope's page and the stylesheet changes at:

• home page: http://gavilancsis6.com/summer2021/penelope/15.html
• 15.css:
  http://gavilancsis6.com/summer2021/penelope/15.css

I've changed the names of Penelope's files to 15.html and 15.css. I've only done this so that our original 13.css and the pages that linked to that would stlll be available for examples. You don't have to rename anything. You can just modify the files that you have for assignments 13 and 14.

3. Upload any images you've added to your site.
4. Click on the title of your html documents and make sure everything is working, or as close as you can get it.
5. Find Assignment #15 in the classroom, and paste in the URL to your front page.

Find a dog or cat to pet.