CSS: Dimensions
(Page 1 of 5 )
So far in this series we have covered the basic syntax of CSS, how to work with backgrounds, text, fonts, borders, outlines, margins, cell padding, lists, and tables. Starting in this tutorial we will cover some of the more advanced CSS techniques, beginning with using the various dimension properties. There are quite a few, and hopefully we will cover all of them in this article.
Dimension: Some People Have It, Some People Don't
With the various dimension properties you can set the height and width of an element, as well as increase the space between the two lines.
For starters, we will set the height of an image via pixels:
<html>
<head>
<style type="text/css">
img.sample
{
height: auto
}
img.secondsample
{
height: 120px
}
img.thirdsample
{
height: 20px
}
</style>
</head>
<body>
<img class="sample" src="gorilla.gif" width="100" height="80" />
<br />
<img class="secondsample" src="gorilla.gif" width="100" height="80" />
<br />
<img class="thirdsample" src="gorilla.gif" width="100" height="80" />
</body>
</html>
Note that even though we set the height and width in our <img> tag, they are still changed by the CSS.
We can also set the height by using a percentage, as in this example:
<html>
<head>
<style type="text/css">
img.sample
{
height: auto
}
img.secondsample
{
height: 150%
}
img.thirdsample
{
height: 10%
}
</style>
</head>
<body>
<img class="sample" src="gorilla.gif" width="100" height="80" />
<br />
<img class="secondsample" src="gorilla.gif" width="100" height="80" />
<br />
<img class="thirdsample" src="gorilla.gif" width="100" height="80" />
</body>
</html>
Next: Setting the Width with Pixels >>
More Style Sheets Articles
More By James Payne
/ 2 
