@coder 1011
Learn to use the CSS3 Width property.
2021-11-16 14:00 · 4 min read
What is CSS3 Width Property?
CSS width property is used to set the width of HTML elements. You can also use min-width and max-width properties, these properties override the width property.
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>
Property: values
Here are some possible width units we can use with the 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
TAGS:
POPULAR POSTS
best free web hosting services...
what is new in miui 11?...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
What is HTML Anchor Tag and Hyperlinks?...
CSS3 RESPONSIVE UI...
How to host a web page in 10 minutes....
Tables HTML...
CSS3 FUNCTIONS...
How to use CSS3 Overflow Property?...
CSS3 FILTERS...
RECENT COMMENTS
2022-03-05 11:05
By coder
on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke
on do you want to make money online?
2021-10-12 12:34
By abnongoke
on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed
on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed
on best free web hosting services
2021-10-12 12:34
By amos tanui
on free website ssl security using cloudflare
