Page 202 - Webapplication11_C11_Flipbook
P. 202

border-width: It specifies the width of the border.
                     border-style: It specifies the style of the border (e.g., solid, dashed, dotted).
                     border-color: It specifies the color of the border.

                     border-top: It specifies the border on the top side.
                     border-right: It specifies the border on the right side.
                     border-bottom: It specifies the border on the bottom side.
                     border-left: It specifies the border on the left side.

              Ð ÐMargin: The space outside the border, separating this box from other elements on the page. Margins are transparent
                 and do not have a background colour. It can take following values:
                     Margin: It specifies the margin area on all four sides of an element.
                     margin-top: It specifies the margin area on the top side.
                     margin-right: It specifies the margin area on the right side.
                     margin-bottom: It specifies the margin area on the bottom side.

                     margin-left: It specifies the margin area on the left side.

              Ð ÐBox Sizing: It specifies how the total width and height of an element are calculated. It can take following values:
                     content-box: Width and height apply to the content only. Padding and border are added outside the content.
                     border-box: Width and height include padding and border. The content size is adjusted to fit within the specified
                    dimensions.

              Let us create a web page using CSS box model.
              <!DOCTYPE html>

              <head>
              <title>CSS Box Model Example</title>
              <link rel="stylesheet" href="styles.css">
              </head>

              <body>
              <div class="box"> This is a box </div>
              </body>
              </html>
              Let us create a CSS file to apply the style.

              div {
              width: 200px;
              height: 100px;

              padding: 20px;
              border: 5px solid blue;
              margin: 10px;
              background-color: lightyellow;

              color: black;
              box-sizing: border-box;
              }


                200     Touchpad Web Applications-XI
   197   198   199   200   201   202   203   204   205   206   207