How to style an image using CSS

The goal of this tutorial is to explain how to use cascading stylesheets to alter the display of images in html.

Let's start with this image. To include it in your webpage, you should write html like this:

<img alt="smile" src="smile.jpg">

smile

But, that is a huge and unwieldy smiley face! You would really prefer to see it displayed with the following attributes:

The image should be shown no larger than 200 pixles wide
The image should be surrounded by a simple black border

You need to use a cascading stylesheet and set some styles on your "img" tag.

Link your html page to a stylesheet by adding this line in the "head" section of your html document:

<html>
  <head>
    <link href="border.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <img alt="smile" src="smile.jpg">
  </body>
</html>

The contents of the border.css file should be:

img {
  width: 200px;
  border: solid 6px black;
}

The end result should look like this:

smile