The Developer Brains


WIDTH PROPERTY

Web Designing | Web Development


SEE MORE














</CSS3 WIDTH>




What is CSS3 Width Property?

Css width property is used to set width of HTML elements. You can also use min-width and max-width property, these properties override the width property.


SEE MORE




















</CSS3 Width Property>

Give a proper width to HTML elements.


Width Property

We can change the width of an HTML element by using CSS width property.
We normally use px, vh, and % unit for width property
{width  :  10px;}
          
property  value

SYNTAX

  • width: auto | value | initial | inherit;

Note:

  • If we are designing a relative layout then you can use width % unit.
  • The max-width and min-width properties override the CSS width property.


	<!DOCTYPE html>
<html>
	<head>
		<style>
			.tdb-width{	
				width:200px;
				background-color:black;
				color:white;
				padding:10px;}
		</style>
	</head>
<body>
<p class="tdb-width">css width property</p>
</body>
</html>



Try it Yourself







</CSS3 Width Range>

Width range for different devices


Property: values

Here are some possible width units we can use with CSS3 width property.
  • length: We can define the width in px, %, cm, etc.
  • %: Defines the width in percent of the containing block
  • vh: Defines view-port width of the containing block
  • Auto: Default value of width property
  • Initial: Sets this property to its default value.
  • Inherit: Child element inherits width property from its parent element.

Devices and their width

If you are working on a reponsive layout then you can code your website by considering these devices width range.
  • Mobile Devices: 320px — 480px
  • iPads, Tablets: 481px — 768px
  • Small Screens, Laptops: 769px — 1024px
  • Desktops, Large Screens: 1025px — 1200px:
  • Extra Large Screens, TV: 1201px and more




















Which is not a correct unit of width property....

1. px
2. %
3. cm
4. prm



Check Now



CSS3 QUIZ







Next: CSS3 Height


Previous

      

Next Page













  Share TDB SCHOOL  

Share this E-Learning Website on social media platforms with your friends and followers