saftutorials.com
CSS Width-Height Tutorial

CSS Width and Height set a div, table, image, p, or heading and more that how many width and height. Width and Height are most important for a website. 

By this tutorials you can learn

1) How to use CSS Width and Height?

2) Where to use CSS Width and Height?

How to use CSS Width and Height?

1) Using by px that means Pixel -  like:  width: 300px

2) Using by % that means Percent - like: width: 60%;

Example

CSS Width and Height using by PX/Pixel
<!DOCTYPE html>
<html>
<head>
  <title>CSS Width and Height using by PX/Pixel</title>
  <style type="text/css">
    .div1
    {
      width: 300px;
      height: 300px;
      background: #ddd;
      border:1px solid red;
    }
  </style>
</head>
<body>
<div class="div1">
  Div using by widht and height px
</div>
</body>
</html>


Div using by width and height px
CSS Width and Height using by % Percent
<!DOCTYPE html>
<html>
<head>
  <title>CSS Width and Height using by % Percent</title>
  <style type="text/css">
    .div2
    {
      width: 70%;
      height: 300px;
      background: #ddd;
      border:1px solid red;
    }
  </style>
</head>
<body>
<div class="div2">
  Div using by widht and height px
</div>
</body>
</html>


Div using by width and height % percent

Where to use CSS Background?

Maximum HTML Tag support CSS Width and Height operation

like: 1) Div, 2) Table, 3) Audio Frame, 4) Video Frame, 5) p, 6) h1-h6 and others HTML Tag.


Example
CSS Width and Height with Table
<!DOCTYPE html>
<html>
<head>
  <title>CSS Width and Height with Table</title>
</head>
<body>
<table style="width: 70%;" border="1">
  <tr bgcolor="#ddd" align="center">
    <td>SL</td>
    <td>Name</td>
    <td>Roll</td>
    <td>Mobile</td>
  </tr>
  <tr>
    <td>1</td>
    <td>John Jakob</td>
    <td>Roll</td>
    <td>+124586544</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Adam Smith</td>
    <td>362584</td>
    <td>+123654852</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Rebel</td>
    <td>653256</td>
    <td>+124586544</td>
  </tr>
</table>
</body>
</html>


SL Name Roll Mobile
1 John Jakob Roll +124586544
2 Adam Smith 362584 +123654852
3 Rebel 653256 +124586544
CSS Width and Height with Image
<!DOCTYPE html>
<html>
<head>
  <title>CSS Width and Height with Image</title>
</head>
<body>
<img src="../uploads/sample.png" style="width: 300px; height: 250px; border:1px solid red;">
</body>
</html>


Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic