The Developer Brains


WIDTH PROPERTY

Web Designing | Web Development


SEE MORE

download tdb school app from playstote
Download the App from Play Store













</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





Style_Sheets @Import_Rule Structure Box_Model Background_Image Media_Queries Fonts Box_Shadow FlexBox Grid Transition Animations 2D_Transform 3D_Transform Filter_Property Inheritance Vertical_Centering Responsive_UI CSS_Quiz















</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










IMPORTANT PROPERTIES

OTHER PROPERTIES

LINKS

ABOUT US!

TDB School is a leading web developer's website. Here you will learn how to code amazing, modern, responsive, and attractive (static and dynamic) websites by using the latest web technologies. Learn Web Development in the easiest & smartest way. Start your journey from a beginner level to a professional level with the full support of our Expert Developer's Team.




Copyright © 2020 www.tdbschool.com
Powered by The Developer Brains