Categories
CSS Web development

CSS width Property


CSS width Property

The CSS width property settles the width of an element.

The CSS min-width and max-width properties override the width property.

Demo:

Click the “Try it” button to change the width of the DIV element:



CSS width Property


Note: the width of an element does not include margins, padding and borders.

Syntax:

width: auto|value;

auto (default) – the width is calculated by the browser.

value – specifies the width in px, %, etc (read also Units in CSS).

Example1:

<!DOCTYPE html>
<html>
<head>
<style>
.example1 {
  width: auto;
  border: 1px solid #333;
}

.example2 {
  width: 100px;
  border: 1px solid #333;  
}

.example3 {
  width: 50%;
  border: 1px solid #333;  
}
</style>
</head>
<body>

<h4>width: auto;</h4>
<div class="example1">This is a paragraph.</div>

<h4>width: 100px;</h4>
<div class="example2">This is a paragraph.</div>

<h4>width: 50%;</h4>
<div class="example3">This is a paragraph.</div>

</body>
</html>

Output:

width: auto;

This is a paragraph.

width: 100px;

This is a paragraph.

width: 50%;

This is a paragraph.

Enjoy coding!

Read also:

CSS columns Property

CSS filter Property

CSS @keyframes Rule

Categories
HTML Web development

HTML width Attribute


HTML width Attribute

The HTML width attribute defines the width of the element (in pixels).

The HTML width attribute can be used on the following elements:

Example1:

For the <canvas> element:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="100" height="100" style="border:1px solid #333">
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#0a9396";
ctx.fillRect(25, 25, 50, 50);
</script>

</body>
</html>

Output:


Example2:

For the <iframe> element:

<!DOCTYPE html>
<html>
<body>

<iframe src="https://www.lenastanley.com/" width="640" height="200">
</iframe>

</body>
</html>

Output:


Example3:

For an <img> element:

<!DOCTYPE html>
<html>
<body>

<img src="https://lenadesign.org/wp-content/uploads/2019/12/avatar.jpg" alt="avatar" width="320" height="240">

</body>
</html>

Output:

avatar

Example4:

For an <input> element:

Note: For input elements, you can use the width attribute only with <input type=”image”>.

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="fname">First name: </label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name: </label>
  <input type="text" id="lname" name="lname"><br>
  <input type="image" src="https://lenadesign.org/wp-content/uploads/2021/06/submit-button.png" alt="Submit" width="100" height="100">
</form>

</body>
</html>

Output:





Example5:

For the <video> element:

<!DOCTYPE html> 
<html> 
<body> 

<video width="640" controls>
  <source src="https://videos.files.wordpress.com/lFj3lsG4/valentines-day-movie_dvd.mp4" type="video/mp4">
</video>

</body> 
</html>

Output:


Enjoy coding!

Read also:

HTML audio tag

HTML style Attribute

HTML tabindex Attribute