Page 201 - Webapplication11_C11_Flipbook
P. 201

<P style="font-family:  verdana;  font-size:  1.5em">A  computer  is a
                           versatile machine that can be used to carry out a variety of tasks.
                           For example, you can do your homework, play games, listen to songs and
                           do many other things on a computer.</P>
                           <H2>Types of Computer</H2>
                            <P style="font-family:Arial Black; font-size: 1.5em">There are many
                           types of computers. Based on their size, the types of computers are,
                           micro computer, mini computer, mainframe computer and super computer.
                           </P>
                           </BODY>

                           </HTML>




                   2.19 CSS BOX MODEL USING <DIV> TAG
                 The CSS box model is a fundamental concept in web design and layout, describing the rectangular boxes generated for
                 elements in the document tree and consisting of the element's content, padding, border, and margin.

                                                                  Margin
                                                                  Border
                                                                  Padding



                                                                  Content









                 We can implement the box model using following CSS properties:

                 Ð ÐContent: This is the innermost part of the box, where the actual content (text, images, etc.) is displayed. It can take
                   following values:

                       width: It specifies the width of the content area.
                       height: It specifies the height of the content area.

                 Ð ÐPadding: The space between the content and the border. It specifies the padding area on all four sides of an element.
                   It can take following values:
                       padding: It sets padding on all four sides.
                       padding-top: It specifies the padding area on the top side.

                       padding-right: It specifies the padding area on the right side.
                       padding-bottom: It specifies the padding area on the bottom side.
                       padding-left: It specifies the padding area on the left side.

                 Ð ÐBorder: The line that surrounds the padding and content, defining the edges of the box. It can take following values:
                       Border: Shorthand property for setting border-width, border-style, and border-color on all four sides.

                                                                                Website Building Using HTML and CSS  199
   196   197   198   199   200   201   202   203   204   205   206