FOLLOW US ON TWITTER



FOLLOW US



img/blogimg/css3.jpg


@coder 887

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:






POST COMMENTS
No Comment

Please login to post comment




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?...
How to host a web page in 10 minutes....
CSS3 RESPONSIVE UI...
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


SOCIAL SHARE



FOLLOW US ON TWITTER



FOLLOW US ON FACEBOOK



FOLLOW US







Recent Blogs



Contact Us

Subscribe Our News-Letter



Kashipur, 244713
Uttarakhand, India



© www.prodevskill.com 2023. All Rights Reserved. Powered by Pro Developer