Aligning images using CSS - Janene McMahan

In response to a question on using CSS with HTML “… the book does not illustrate how to use the CSS code on those pages” I am using a simple button to show how to align images.

This snippet:

img.align-left {
  float: left;
  margin-right: 10px;}
img.align-right {
  float: right;
  margin-left: 10px;}
img.medium {
  width: 250px;
  height: 250px;}

doesn’t have enough information. More info is located on page 236. In order to use the CSS shown above you need to either put it in a separate stylesheet images.css for example and then link to it:

Using External CSS
<head>
  <link href="css/images.css" rel="stylesheet" type="text/css" />
</head>

Or you need to put all your css in your head section like this:

Using Internal CSS
<head>
  <style type="text/css">
   img.align-left {float: left; margin-right: 10px;}
   img.align-right {float: right; margin-left: 10px;}
   img.medium {width: 250px; height: 250px;}
  </style>
</head>

I “cheat” and use CSS inline where I can… unless I’m using it a lot, in which case I do one of the two things above
(1. if used on many pages 2. if only on one page)

Here is that button aligned to the right using the code set out in the book. If you view the source of this post you will see that I used CSS inline. In order to use what was shown in the book I would lay out the CSS code as given in the head of the document. The image tag would look like this:

<img class="align-right" alt="student button" src="path" />