CSS
  1. CSS intro
  2. CSS stylesheets
  3. CSS syntax
  4. CSS Classes & ID's
  5. CSS comments
  6. CSS BG properties
  7. CSS text properties
  8. CSS font properties
  9. CSS list properties
  10. CSS border properties
  11. CSS margin properties
  12. CSS padding properties
  13. CSS outline properties
  14. CSS table properties
  15. CSS dim properties
  16. CSS class properties
  17. CSS position properties
  18. CSS pseudo classes
  19. CSS pseudo elements
  20. CSS shortcuts
  21. CSS media types
  22. CSS summary

CSS dimension properties

With CSS dimension properties, you can set the height and width of elements as well as the space between lines.

This tutorial focuses on:

Setting the height of elements

The height of elements is set using the height property.

Example:
<img src="/images/apple.jpg" alt="Apple" /> <img src="/images/sky.jpg" alt="Sky" style="height: 200px;" />
Output:
Apple Sky

In the above example, the first image has its default height and the second image is set to have a height of 200 pixels.

Setting the width of elements

The width of elements is set using the width property.

Example:
<html> <head> <title>Setting the width of elements</title> </head> <body> <table border="2"> <tr><td>Cell 1</td><td>Cell 2</td></tr> <tr><td>Cell 3</td><td>Cell 4</td></tr> </table> <table border="2" style="width: 200px;"> <tr><td>Cell 1</td><td>Cell 2</td></tr> <tr><td>Cell 3</td><td>Cell 4</td></tr> </table> </body> </html>
Output:
Cell 1 Cell 2
Cell 3 Cell 4
Cell 1 Cell 2
Cell 3 Cell 4

In the above example, the first table has its default width and the second table is set to have a width of 200 pixels.

Setting the space between lines

The space between lines is set using the line-height property.

Example:
<html> <head> <style type="text/css"> p.one {line-height: 20px;} p.two {line-height: 30px;} </style> <title>Setting the space between lines</title> </head> <body> <p> This is a paragraph with regular line spacing. This is the second sentence of the paragraph. This is the third sentence of the paragraph. This is the fourth sentence of the paragraph. </p> <p class="one"> This is a paragraph with small line spacing. This is the second sentence of the paragraph. This is the third sentence of the paragraph. This is the fourth sentence of the paragraph. </p> <p class="two"> This is a paragraph with big line spacing. This is the second sentence of the paragraph. This is the third sentence of the paragraph. This is the fourth sentence of the paragraph. </p> </body> </html>
Output:

This is a paragraph with regular line spacing. This is the second sentence of the paragraph. This is the third sentence of the paragraph. This is the fourth sentence of the paragraph.

This is a paragraph with small line spacing. This is the second sentence of the paragraph. This is the third sentence of the paragraph. This is the fourth sentence of the paragraph.

This is a paragraph with big line spacing. This is the second sentence of the paragraph. This is the third sentence of the paragraph. This is the fourth sentence of the paragraph.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information