Home arrow Style Sheets arrow CSS: Dimensions
STYLE SHEETS

CSS: Dimensions


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.

Author Info:
By: James Payne
Rating: 5 stars5 stars5 stars5 stars5 stars / 7
April 07, 2008
TABLE OF CONTENTS:
  1. · CSS: Dimensions
  2. · Setting the Width with Pixels
  3. · Setting the Maximum Height and Minimum Height
  4. · Setting the Space Between Lines
  5. · Scrollbars in CSS

print this article
SEARCH DEVARTICLES

CSS: Dimensions
(Page 1 of 5 )

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>


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials