CSS Width Max-width

CSS Width Max-width


CSS Width, and Max-Width
As we have seen before a block level element takes up the complete width.
What sometimes happens is the element becomes unclear when it is stretched to full available width.
To prevent that, we can specify width using width property.
For Example a <div> is a block element and sometimes the windows screen is smaller than the width it takes to control that we use width property.
Max-width on the other hand if used then- 
CSS will not apply on a screen width wider than specified. 
This is helpful to use browsers in smaller screens.
In other words - 
The max-width property allows you to specify the maximum width of a box. The value of the max-width property can be a number, a length, or a percentage. 
Now we will see example - 
Example - 
To see the changes reduce the window size LESS THAN 800px 
<!DOCTYPE html>
<html lang="en">
<style>
div.first {
  width: 800px;
  margin: auto;
  border: 3px solid #0ca4eb;
}

div.second {
  max-width: 800px;
  margin: auto;
  border: 3px solid #8f3418;
}
</style>
<head>
    <link rel="stylesheet" href="sample.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia|Audiowide|Trirong">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>


    <title>Document</title>
</head>
<body>
    <html>

  <head>
      <title>HTML Tables</title>
  </head>
 
  <body>
    <div class="first">
WIDTH OF THIS DIV IS 800PX AND MY NAME IS MUKUL AGRAWAL WRITER OF THIS V-LOG EVERYBODY SHOULD LEARN WEB DEVELOPMENT
    </div>
    <br>
    <div class="second">
MAX-WIDTH OF THIS DIV  800PX AND MY NAME IS MUKUL AGRAWAL WRITER OF THIS V-LOG EVERYBODY SHOULD LEARN WEB DEVELOPMENT
    </div>
  </body>
</html>
     
</body>

</html>
Output -